fixes to account management dashboard (#86)

Co-authored-by: pourhakimi <[email protected]>

Author: LineIndent

account_management_dashboard/account_management_dashboard/account_management_dashboard.py

@@ -38,9 +38,9 @@ def index() -> rx.Component:
                 class_name="flex flex-col lg:flex-row",
             ),
             rx.toast.provider(),
-            class_name="ml-64 p-8 flex-grow",
+            class_name="p-8 flex flex-col w-full min-h-[100vh] overflow-y-auto",
         ),
-        class_name="flex bg-gray-50 min-h-screen",
+        class_name="flex flex-row bg-gray-50 min-h-screen w-full",
     )
 
 

account_management_dashboard/account_management_dashboard/components/header.py

@@ -26,7 +26,7 @@ def header_component() -> rx.Component:
                 on_click=AccountState.add_account,
                 class_name="flex items-center px-4 py-2 text-sm font-medium text-white bg-orange-500 border border-transparent rounded-md shadow-sm hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 transition",
             ),
-            class_name="flex items-center space-x-3",
+            class_name="flex items-center space-x-3 max-md:hidden",
         ),
-        class_name="flex items-center justify-between pb-6 border-b border-gray-200 mb-6",
+        class_name="w-full flex items-center justify-between pb-6 border-b border-gray-200 mb-6",
     )

account_management_dashboard/account_management_dashboard/components/net_worth_graph.py

@@ -68,7 +68,7 @@ def net_worth_graph_component() -> rx.Component:
                     on_change=AccountState.set_graph_range,
                     class_name="text-sm border border-gray-300 rounded-md px-3 py-1.5 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500",
                 ),
-                class_name="flex space-x-3 mb-4",
+                class_name="flex flex-wrap space-x-3 mb-4 gap-y-2",
             ),
             rx.cond(
                 recharts_available,
@@ -131,5 +131,5 @@ def net_worth_graph_component() -> rx.Component:
             ),
             class_name="p-4 bg-white border border-gray-200 rounded-lg shadow-sm",
         ),
-        class_name="mb-8",
+        class_name="mb-8 w-full",
     )

account_management_dashboard/account_management_dashboard/components/net_worth_summary.py

@@ -54,7 +54,7 @@ def net_worth_summary() -> rx.Component:
                 ),
                 class_name="flex items-center",
             ),
-            class_name="flex items-baseline",
+            class_name="flex flex-wrap items-baseline gap-y-2",
         ),
         class_name="mb-6",
     )

account_management_dashboard/account_management_dashboard/components/sidebar.py

@@ -69,5 +69,5 @@ def sidebar() -> rx.Component:
             ),
             class_name="px-4 pb-4",
         ),
-        class_name="flex flex-col w-64 h-screen bg-white border-r border-gray-200 fixed left-0 top-0",
+        class_name="flex flex-col w-full max-w-[250px] h-screen bg-white border-r border-gray-200 sticky left-0 top-0 max-lg:hidden",
     )