Fix unnecessary scrollbar on facility overview page (#10833)

ohcnetwork · Feb 27, 2025 · cdb10f9 · cdb10f9
1 parent 6a6d67a
commit cdb10f9
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 24 deletions.
diff --git a/src/Routers/AppRouter.tsx b/src/Routers/AppRouter.tsx
@@ -106,24 +106,21 @@ export default function AppRouter() {
         )}
         <main
           id="pages"
-          className="flex-1 overflow-y-auto bg-gray-100 focus:outline-none md:pb-2 md:pr-2"
+          className="flex flex-col flex-1 min-h-[calc(100svh-theme(spacing.4))] md:m-2 md:peer-data-[state=collapsed]:ml-0 border rounded-lg shadow bg-gray-50 focus:outline-none"
         >
-          <div className="relative z-10 flex h-16 shrink-0 bg-white shadow md:hidden">
+          <div className="relative z-10 flex h-16 bg-white shadow shrink-0 md:hidden">
             <div className="flex items-center">
               {shouldShowSidebar && <SidebarTrigger />}
             </div>
-            <a className="flex h-full w-full items-center px-4 md:hidden">
+            <a className="flex items-center w-full h-full px-4 md:hidden">
               <img
-                className="h-8 w-auto"
+                className="w-auto h-8"
                 src={careConfig.mainLogo?.dark}
                 alt="care logo"
               />
             </a>
           </div>
-          <div
-            className="max-w-8xl mx-auto mt-4 min-h-[96vh] rounded-lg border bg-gray-50 p-3 shadow"
-            data-cui-page
-          >
+          <div className="p-3 mt-4" data-cui-page>
             <ErrorBoundary fallback={<ErrorPage forError="PAGE_LOAD_ERROR" />}>
               {pages}
             </ErrorBoundary>

diff --git a/src/components/Common/Page.tsx b/src/components/Common/Page.tsx
@@ -31,7 +31,7 @@ export default function Page(props: PageProps) {
   // }, [props.collapseSidebar]);
 
   return (
-    <div className={cn("md:px-6 py-0", props.className)} ref={props.ref}>
+    <div className={cn("md:px-6 py-0 grid", props.className)} ref={props.ref}>
       <div className="flex flex-col justify-between gap-2 px-3 md:flex-row md:items-center md:gap-6 md:px-0">
         <PageTitle
           changePageMetadata={props.changePageMetadata}

diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
@@ -143,7 +143,7 @@ const SidebarProvider = React.forwardRef<
               } as React.CSSProperties
             }
             className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              "group/sidebar-wrapper bg-gray-100 flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
               className,
             )}
             ref={ref}
@@ -211,7 +211,7 @@ const Sidebar = React.forwardRef<
             <VisuallyHidden>
               <SheetTitle>Sidebar</SheetTitle>
             </VisuallyHidden>
-            <div className="flex h-full w-full flex-col">{children}</div>
+            <div className="flex flex-col w-full h-full">{children}</div>
           </SheetContent>
         </Sheet>
       );
@@ -220,7 +220,7 @@ const Sidebar = React.forwardRef<
     return (
       <div
         ref={ref}
-        className="group peer hidden md:block text-sidebar-foreground"
+        className="hidden group peer md:block text-sidebar-foreground"
         data-state={state}
         data-collapsible={state === "collapsed" ? collapsible : ""}
         data-variant={variant}
@@ -285,7 +285,7 @@ const SidebarTrigger = React.forwardRef<
     >
       {isMobile ? (
         <svg
-          className="h-8 w-8"
+          className="w-8 h-8"
           stroke="currentColor"
           fill="none"
           viewBox="0 0 24 24"
@@ -637,7 +637,7 @@ const SidebarMenuAction = React.forwardRef<
         "peer-data-[size=lg]/menu-button:top-2.5",
         "group-data-[collapsible=icon]:hidden",
         showOnHover &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground··md:opacity-0",
         className,
       )}
       {...props}
@@ -687,7 +687,7 @@ const SidebarMenuSkeleton = React.forwardRef<
     >
       {showIcon && (
         <Skeleton
-          className="size-4 rounded-md"
+          className="rounded-md size-4"
           data-sidebar="menu-skeleton-icon"
         />
       )}

diff --git a/src/pages/Facility/overview.tsx b/src/pages/Facility/overview.tsx
@@ -35,10 +35,10 @@ export function FacilityOverview({ facilityId }: FacilityOverviewProps) {
   ];
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="container mx-auto p-6 space-y-8">
+    <div className="">
+      <div className="container p-6 mx-auto space-y-8">
         {/* Welcome Header */}
-        <div className="bg-white rounded-lg p-6 shadow-sm">
+        <div className="p-6 bg-white rounded-lg shadow-sm">
           <div className="flex items-center gap-4 mb-4">
             <div>
               <h1 className="text-2xl font-bold text-gray-900">
@@ -53,20 +53,20 @@ export function FacilityOverview({ facilityId }: FacilityOverviewProps) {
 
         {/* Quick Actions Section */}
         <div className="">
-          <h2 className="text-xl font-semibold mb-6 text-gray-900">
+          <h2 className="mb-6 text-xl font-semibold text-gray-900">
             {t("quick_actions")}
           </h2>
-          <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3">
             {shortcuts.map((shortcut) => (
               <Link
                 key={shortcut.href}
                 href={shortcut.href}
                 className="block h-full transition-all duration-200 hover:scale-102 hover:shadow-md"
               >
-                <Card className="border-0 shadow-sm hover:bg-gray-50 h-full">
-                  <CardHeader className="h-full flex flex-row items-center gap-4">
-                    <div className="p-2 bg-primary/10 rounded-lg">
-                      <shortcut.icon className="h-6 w-6 text-primary" />
+                <Card className="h-full border-0 shadow-sm hover:bg-gray-50">
+                  <CardHeader className="flex flex-row items-center h-full gap-4">
+                    <div className="p-2 rounded-lg bg-primary/10">
+                      <shortcut.icon className="w-6 h-6 text-primary" />
                     </div>
                     <div>
                       <CardTitle className="text-lg">