fixed menu tab scroll sizes

This commit is contained in:
SethBurkart123
2024-03-27 23:28:16 +11:00
parent 6d07968f74
commit 073ba4d0d5
3 changed files with 12 additions and 12 deletions
+1 -1
View File
@@ -31,7 +31,7 @@ const SettingsPage = ({ standalone }: SettingsPage) => {
return ( return (
<SettingsContextProvider> <SettingsContextProvider>
<div className={`flex flex-col w-[384px] shadow-2xl gap-2 bg-white ${ standalone ? '' : 'rounded-xl' } ${ standalone ? 'h-[600px]' : 'h-[100vh]' } overflow-clip dark:bg-zinc-800 dark:text-white`}> <div className={`flex flex-col w-[384px] shadow-2xl gap-2 bg-white ${ standalone ? 'h-[600px]' : 'h-[100vh] rounded-xl' } overflow-clip dark:bg-zinc-800 dark:text-white`}>
<div className="grid border-b border-b-zinc-200/40 place-items-center"> <div className="grid border-b border-b-zinc-200/40 place-items-center">
<img src={logo} className="w-4/5 dark:hidden" /> <img src={logo} className="w-4/5 dark:hidden" />
<img src={logoDark} className="hidden w-4/5 dark:block" /> <img src={logoDark} className="hidden w-4/5 dark:block" />
+3 -4
View File
@@ -77,20 +77,19 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
))} ))}
</div> </div>
</div> </div>
<div className="h-full px-4 overflow-y-scroll overflow-x-clip"> <div className="h-full px-4 overflow-x-clip">
<motion.div <motion.div
initial={false} initial={false}
animate={{ x: `${position}%` }} animate={{ x: `${position}%` }}
transition={springTransition} transition={springTransition}
className='flex'
> >
<div className="flex">
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
<div key={index} className={`absolute w-full transition-opacity duration-300 pb-4 ${activeTab === index ? 'opacity-100' : 'opacity-0'}`} <div key={index} className={`absolute h-[100vh] overflow-y-scroll w-full pb-40 transition-opacity duration-300 ${activeTab === index ? 'opacity-100' : 'opacity-0'}`}
style={{left: `${index * 100}%`}}> style={{left: `${index * 100}%`}}>
{tab.content} {tab.content}
</div> </div>
))} ))}
</div>
</motion.div> </motion.div>
</div> </div>
</> </>
+3 -2
View File
@@ -5,8 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BetterSEQTA+ Settings</title> <title>BetterSEQTA+ Settings</title>
</head> </head>
<body class=""> <body style="width: 384px; height: 600px;">
<div id="ExtensionPopup"></div> <div id="ExtensionPopup">
</div>
<script type="module" src="./main.tsx"></script> <script type="module" src="./main.tsx"></script>
</body> </body>
</html> </html>