fix vertical overflow

This commit is contained in:
pierre
2024-01-05 13:44:01 +01:00
parent 685019884f
commit 85b0b6d73d
4 changed files with 13 additions and 4 deletions
+3 -1
View File
@@ -5,7 +5,9 @@ function NavLayout() {
return (
<div className="h-full flex flex-col bg-blanc-nacre dark:bg-baltic-sea text-baltic-sea dark:text-white">
<TopBar />
<Outlet />
<div className="h-full flex flex-col overflow-auto">
<Outlet />
</div>
</div>
);
}
+1 -1
View File
@@ -76,7 +76,7 @@ function Home() {
return (
<div className="h-full flex flex-col p-4">
<ConnectionStatus />
<div className="flex grow flex-col justify-between gap-y-2">
<div className="flex grow flex-col justify-between gap-y-6">
<div className="flex flex-col justify-between gap-y-4">
<NetworkModeSelect />
<div className="flex flex-col gap-4">
@@ -38,7 +38,7 @@ function UiScaler() {
onChange={handleChange}
onMouseUp={setNewFontSize}
onKeyUp={setNewFontSize}
className="range flex flex-1 accent-melon"
className="range flex flex-1 accent-melon cursor-pointer"
/>
</div>
);
+8 -1
View File
@@ -1,6 +1,7 @@
import { useEffect, useMemo, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import clsx from 'clsx';
import { routes } from '../constants';
import { Routes } from '../types';
@@ -95,7 +96,13 @@ export default function TopBar() {
}, [location.pathname, navBarData]);
return (
<nav className="flex flex-row flex-nowrap justify-between items-center shrink-0 bg-white text-baltic-sea dark:bg-baltic-sea-jaguar dark:text-mercury-pinkish h-16 text-xl">
<nav
className={clsx([
'flex flex-row flex-nowrap justify-between items-center shrink-0',
'bg-white text-baltic-sea dark:bg-baltic-sea-jaguar dark:text-mercury-pinkish',
'h-16 text-xl shadow z-50',
])}
>
{currentNavLocation?.leftIcon ? (
<button className="w-6 mx-4" onClick={currentNavLocation.handleLeftNav}>
<span className="font-icon dark:text-laughing-jack text-2xl">