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 (
<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">
<img src={logo} className="w-4/5 dark:hidden" />
<img src={logoDark} className="hidden w-4/5 dark:block" />
+8 -9
View File
@@ -77,20 +77,19 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
))}
</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
initial={false}
animate={{ x: `${position}%` }}
transition={springTransition}
className='flex'
>
<div className="flex">
{tabs.map((tab, index) => (
<div key={index} className={`absolute w-full transition-opacity duration-300 pb-4 ${activeTab === index ? 'opacity-100' : 'opacity-0'}`}
style={{left: `${index * 100}%`}}>
{tab.content}
</div>
))}
</div>
{tabs.map((tab, index) => (
<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}%`}}>
{tab.content}
</div>
))}
</motion.div>
</div>
</>
+3 -2
View File
@@ -5,8 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BetterSEQTA+ Settings</title>
</head>
<body class="">
<div id="ExtensionPopup"></div>
<body style="width: 384px; height: 600px;">
<div id="ExtensionPopup">
</div>
<script type="module" src="./main.tsx"></script>
</body>
</html>