ui fix: scroller bar in options flow page

This commit is contained in:
MuslemRahimi 2024-11-21 17:29:43 +01:00
parent ce04f0e26a
commit da288f62e4
2 changed files with 10 additions and 12 deletions

View File

@ -227,7 +227,7 @@
<main class="flex flex-1 flex-col gap-4 sm:p-4 md:gap-8">
<div class="grid gap-4 md:gap-8 grid-cols-1 lg:grid-cols-2 text-start">
<Card.Root
class="order-1 sm:order-2 overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar max-h-[450px]"
class="order-1 sm:order-2 overflow-x-scroll overflow-hidden overflow-y-auto no-scrollbar max-h-[450px]"
>
<Card.Header class="flex flex-row items-center">
<div class="flex flex-col items-start w-full">
@ -320,7 +320,7 @@
</Card.Content>
</Card.Root>
<Card.Root
class="order-1 sm:order-2 overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar max-h-[450px]"
class="order-1 sm:order-2 overflow-x-scroll overflow-hidden overflow-y-auto no-scrollbar max-h-[450px]"
>
<Card.Header class="flex flex-row items-center">
<div class="flex flex-col items-start w-full">
@ -415,9 +415,7 @@
</div>
<div class="grid gap-4 md:gap-8 grid-cols-1 lg:grid-cols-2 text-start">
<Card.Root
class="overflow-x-scroll overflow-hidden overflow-y-scroll"
>
<Card.Root class="overflow-x-scroll overflow-hidden overflow-y-auto">
<Card.Header class="flex flex-row items-center">
<div class="flex flex-col items-start w-full">
<div class="flex flex-row w-full items-center">
@ -438,7 +436,7 @@
<Card.Description class="mt-2 text-sm sm:text-[1rem]"
>Recent unusual options with the highest ...</Card.Description
>
<Tabs.Root value="premium" class="w-fit mt-5 ">
<Tabs.Root value="premium" class="w-full sm:w-fit mt-5 ">
<Tabs.List class="grid w-full grid-cols-3 bg-[#313131]">
<Tabs.Trigger
on:click={() => changeTable("premium")}
@ -539,7 +537,7 @@
</Card.Root>
<Card.Root
class="order-3 sm:order-1 overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[470px]"
class="order-3 sm:order-1 overflow-x-scroll overflow-hidden overflow-y-auto no-scrollbar sm:max-h-[470px]"
>
<Card.Header class="flex flex-row items-center">
<div class="flex flex-col items-start w-full">
@ -635,7 +633,7 @@
</Card.Root>
<Card.Root
class="order-1 sm:order-2 overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[550px]"
class="order-1 sm:order-2 overflow-x-scroll overflow-hidden overflow-y-auto no-scrollbar sm:max-h-[550px]"
>
<Card.Header class="flex flex-row items-center">
<div class="flex flex-col items-start w-full">
@ -722,7 +720,7 @@
</Card.Root>
<Card.Root
class="order-2 sm:order-3 overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[550px]"
class="order-2 sm:order-3 overflow-x-scroll overflow-hidden overflow-y-auto no-scrollbar sm:max-h-[550px]"
>
<Card.Header class="flex flex-row items-center">
<div class="flex flex-col items-start w-full">

View File

@ -997,7 +997,7 @@ function sendMessage(message) {
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<body class="xl:fixed h-screen w-full max-w-screen-xl">
<body class="overflow-y-auto">
<section
class="w-full max-w-screen sm:max-w-6xl xl:max-w-7xl flex justify-center items-center bg-[#09090B] pb-20"
>
@ -1297,7 +1297,7 @@ function sendMessage(message) {
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
class="w-56 h-fit max-h-72 overflow-y-auto "
>
{#if !["put_call", "sentiment", "execution_estimate", "option_activity_type", "date_expiration", "underlying_type"]?.includes(row?.rule)}
<DropdownMenu.Label
@ -1611,7 +1611,7 @@ function sendMessage(message) {
<!-- Page wrapper -->
<div class="flex w-full m-auto h-full overflow-hidden">
{#if displayedData?.length !== 0}
<div class="mt-8 w-full overflow-x-auto overflow-y-auto h-[850px]">
<div class="mt-8 w-full overflow-x-auto h-[850px] overflow-hidden">
<div class="table-container">
<div class="table">
<VirtualList