Merge pull request #1343 from flanksource/1323-cannot-see-contents-se…

…ttings-left-sidebar-screen-small 1323-cannot-see-contents-settings-left-sidebar-screen-small
flanksource · Aug 25, 2023 · 91ae60f · 91ae60f
2 parents 18f08f9 + 2dcf499
commit 91ae60f
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 14 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -11,7 +11,11 @@ export default function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <div id="root" suppressHydrationWarning>
+      <div
+        id="root"
+        className="flex flex-col w-screen h-screen overflow-auto"
+        suppressHydrationWarning
+      >
         {authProvider === "clerk" ? (
           <ClerkProvider {...pageProps}>
             <Component {...pageProps} />

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -8,7 +8,7 @@ import { isCanaryUI } from "../src/context/Environment";
 const Home: NextPage = () => {
   return (
     <AuthSessionChecker>
-      <div className="container-fluid">
+      <div className="container-fluid flex flex-col overflow-auto">
         <Head prefix="Home" />
         {isCanaryUI ? <CanaryCheckerApp /> : <App />}
       </div>

diff --git a/src/App.tsx b/src/App.tsx
@@ -174,7 +174,7 @@ const settingsNav: SettingsNavigationItems = {
       resourceName: tables.database
     },
     {
-      name: "Event Queue Status",
+      name: "Event Queue",
       href: "/settings/event-queue-status",
       icon: FaTasks,
       featureName: features["settings.event_queue_status"],

diff --git a/src/components/Layout/SidebarLayout.tsx b/src/components/Layout/SidebarLayout.tsx
@@ -70,15 +70,15 @@ interface NavItemWrapperProps {
   className?: string;
 }
 
-const NavItemWrapper = (props: NavItemWrapperProps) => {
+function NavItemWrapper(props: NavItemWrapperProps) {
   const { as: Component = "div", active, children, className } = props;
 
   const cls = ({ isActive }: { isActive: boolean }) =>
     clsx(
       active || isActive
         ? "bg-gray-800 text-gray-100"
         : "text-gray-200 hover:bg-gray-800 hover:text-gray-100",
-      "group rounded-md py-3 px-2 flex items-center text-md font-medium",
+      "group rounded-md py-1.5 px-2 flex items-center text-md font-medium",
       className
     );
   return Component === "div" ? (
@@ -88,7 +88,8 @@ const NavItemWrapper = (props: NavItemWrapperProps) => {
       {children}
     </Component>
   );
-};
+}
+
 function SideNavItem({
   name,
   current = false,
@@ -286,16 +287,21 @@ export function SidebarLayout({ navigation, settingsNav, checkPath }: Props) {
   return (
     <>
       <Toaster position="top-right" reverseOrder={false} />
-      <div className="flex h-screen">
+      <div className="flex flex-row h-screen min-w-[1280px]">
         <div
-          className={clsx("transform duration-500 w-14 z-10 bg-gray-700", {
-            "lg:w-56": !collapseSidebar
-          })}
+          className={clsx(
+            "transform duration-500 z-10 bg-gray-700 flex flex-col",
+            {
+              "w-56": !collapseSidebar,
+              "w-14": collapseSidebar
+            }
+          )}
           ref={innerRef}
         >
           <div
-            className={clsx("h-full transform duration-500 w-14", {
-              "lg:w-56": !collapseSidebar
+            className={clsx("flex flex-col h-full transform duration-500", {
+              "w-56": !collapseSidebar,
+              "w-14": collapseSidebar
             })}
           >
             <button
@@ -333,7 +339,7 @@ export function SidebarLayout({ navigation, settingsNav, checkPath }: Props) {
 
             <div
               className={clsx(
-                "flex flex-col flex-grow",
+                "flex flex-col flex-1 overflow-y-auto",
                 collapseSidebar ? "px-1" : "px-3"
               )}
             >
@@ -348,7 +354,9 @@ export function SidebarLayout({ navigation, settingsNav, checkPath }: Props) {
             </div>
           </div>
         </div>
-        <Outlet />
+        <div className="flex flex-col flex-1 h-screen overflow-auto bg-gray-50">
+          <Outlet />
+        </div>
       </div>
     </>
   );