fixes to admin dashboard (#91)

Co-authored-by: pourhakimi <84860195+pourhakimi@users.noreply.github.com>

Author: LineIndent

admin_dashboard/admin_dashboard/admin_dashboard.py

@@ -12,14 +12,11 @@ def index() -> rx.Component:
         rx.el.div(
             navigation(),
             rx.el.div(
-                rx.el.div(
-                    data_table(),
-                    class_name="flex-grow p-6 overflow-y-auto",
-                ),
+                data_table(),
                 customer_details(),
-                class_name="flex flex-row h-[calc(100vh-56px)] overflow-hidden",
+                class_name="grid grid-cols-1 md:grid-cols-3",
             ),
-            class_name="bg-gray-100 h-screen overflow-hidden",
+            class_name="bg-gray-100 w-full h-screen",
         ),
         appearance="light",
     )

admin_dashboard/admin_dashboard/components/customer_details.py

@@ -176,5 +176,5 @@ def customer_details() -> rx.Component:
                 class_name="flex items-center justify-center h-[100vh] p-5 bg-gray-50 rounded-lg shadow-inner",
             ),
         ),
-        class_name="w-1/3 flex-shrink-0 h-[100vh] overflow-hidden sticky top-0 right-0 border-l border-gray-200",
+        class_name="col-span-1",
     )

admin_dashboard/admin_dashboard/components/data_table.py

@@ -327,5 +327,5 @@ def data_table() -> rx.Component:
             ),
             class_name="flex justify-end",
         ),
-        class_name="bg-white p-6 rounded-lg shadow-md",
+        class_name="bg-white p-6 rounded-lg shadow-md col-span-1 md:col-span-2",
     )

admin_dashboard/admin_dashboard/components/navigation.py

@@ -10,8 +10,8 @@ def navigation_item(text: str, href: str) -> rx.Component:
         href=href,
         class_name=rx.cond(
             NavigationState.current_page == href,
-            "px-4 py-2 text-sm font-medium text-white bg-emerald-700 rounded-md shadow-sm",
-            "px-4 py-2 text-sm font-medium text-emerald-100 hover:bg-emerald-600 hover:text-white rounded-md transition-colors duration-150 ease-in-out",
+            "px-4 py-2 text-sm font-medium text-white bg-emerald-700 rounded-md shadow-sm whitespace-nowrap sm:whitespace-normal",
+            "px-4 py-2 text-sm font-medium text-emerald-100 hover:bg-emerald-600 hover:text-white rounded-md transition-colors duration-150 ease-in-out whitespace-nowrap sm:whitespace-normal",
         ),
     )
 
@@ -22,7 +22,7 @@ def navigation() -> rx.Component:
         rx.el.div(
             rx.el.img(
                 src="https://avatars.githubusercontent.com/u/104714959?s=200&v=4",
-                class_name="h-8 w-auto mr-4",
+                class_name="h-8 w-auto mr-4 max-md:hidden",
                 alt="App Logo",
             ),
             navigation_item("Sales Pipeline", "/sales-pipeline"),
@@ -32,7 +32,7 @@ def navigation() -> rx.Component:
                 "Customer Success Hub",
                 "/customer-success-hub",
             ),
-            class_name="flex items-center space-x-2",
+            class_name="flex items-center space-x-2 overflow-x-auto w-full",
         ),
         class_name="bg-emerald-800 px-6 py-2 shadow-md sticky top-0 left-0 w-full z-50 h-[56px]",
     )