fix: scrolling in details panel and remove extraneous css

dhis2 · Aug 17, 2023 · a692b10 · a692b10
1 parent 78fbef8
commit a692b10
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 35 deletions.
diff --git a/src/components/app/App.css b/src/components/app/App.css
@@ -6,4 +6,5 @@
     --transition-style: ease-out;
 
     --header-height: 48px;
+    --toolbar-height: 32px;
 }
diff --git a/src/components/app/App.js b/src/components/app/App.js
@@ -12,8 +12,8 @@ import { CURRENT_AO_KEY } from '../../util/analyticalObject.js'
 import { getUrlParameter } from '../../util/requests.js'
 import { useSystemSettings } from '../SystemSettingsProvider.js'
 import AppLayout from './AppLayout.js'
-import styles from './styles/App.module.css'
 import './App.css'
+import './styles/App.module.css'
 
 const App = () => {
     const systemSettings = useSystemSettings()
@@ -51,7 +51,7 @@ const App = () => {
     }, [systemSettings, dispatch])
 
     return !isEmpty(systemSettings) ? (
-        <div className={styles.app}>
+        <div>
             <CssVariables colors spacers theme />
             <AppLayout />
         </div>

diff --git a/src/components/app/AppLayout.js b/src/components/app/AppLayout.js
@@ -30,28 +30,26 @@ const AppLayout = () => {
 
     return (
         <>
-            <div className={cx({ [styles.appLayout]: !downloadMode })}>
-                {downloadMode ? (
-                    <DownloadModeMenu />
-                ) : (
-                    <AppMenu onFileMenuAction={onFileMenuAction} />
-                )}
-                <div
-                    className={cx(styles.content, {
-                        [styles.downloadContent]: downloadMode,
-                    })}
-                >
-                    {downloadMode ? <DownloadSettings /> : <LayersPanel />}
-                    <div className={styles.appMapAndTable}>
-                        <MapPosition />
-                        {dataTableOpen && <BottomPanel />}
-                    </div>
-                    {!downloadMode && (
-                        <DetailsPanel
-                            interpretationsRenderId={interpretationsRenderId}
-                        />
-                    )}
+            {downloadMode ? (
+                <DownloadModeMenu />
+            ) : (
+                <AppMenu onFileMenuAction={onFileMenuAction} />
+            )}
+            <div
+                className={cx(styles.content, {
+                    [styles.downloadContent]: downloadMode,
+                })}
+            >
+                {downloadMode ? <DownloadSettings /> : <LayersPanel />}
+                <div className={styles.appMapAndTable}>
+                    <MapPosition />
+                    {dataTableOpen && <BottomPanel />}
                 </div>
+                {!downloadMode && (
+                    <DetailsPanel
+                        interpretationsRenderId={interpretationsRenderId}
+                    />
+                )}
             </div>
             <LayersLoader />
             <ContextMenu />

diff --git a/src/components/app/styles/App.module.css b/src/components/app/styles/App.module.css
@@ -19,11 +19,6 @@
     max-height: calc(100vh - 64px)
 }
 
-.app {
-    font-family: 'Roboto', sans-serif;
-    height: 100vh;
-}
-
 /* Scrollbar width */
 ::-webkit-scrollbar {
     width: 6px;

diff --git a/src/components/app/styles/AppLayout.module.css b/src/components/app/styles/AppLayout.module.css
@@ -1,13 +1,7 @@
-.appLayout {
-    display: flex;
-    height: calc(100vh - var(--header-height));
-    flex-direction: column;
-}
-
 .content {
     display: flex;
     flex-direction: row;
-    height: 100%;
+    height: calc(100vh - var(--header-height) - var(--toolbar-height));
 }
 
 .downloadContent {

diff --git a/src/components/core/styles/Drawer.module.css b/src/components/core/styles/Drawer.module.css
@@ -1,6 +1,7 @@
 .drawer {
     background-color: #f4f6f8;
     height: 100%;
+    overflow-y: auto;
 }
 
 .left {