Got rid of dreaded horizontal scroll for flowsheet list view

watertap-org · Jun 2, 2024 · 3b02644 · 3b02644
1 parent 0bef78e
commit 3b02644
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 5 deletions.
diff --git a/electron/ui/src/App.css b/electron/ui/src/App.css
@@ -3,6 +3,7 @@
   font-family: oxygen, sans-serif;
   background: white;
   background-size: cover;
+  width: 100%;
 }
 
 .App-logo {

diff --git a/electron/ui/src/components/FlowsheetsListTable/FlowsheetsListTable.js b/electron/ui/src/components/FlowsheetsListTable/FlowsheetsListTable.js
@@ -181,8 +181,9 @@ export default function FlowsheetsListTable(props) {
     }
 
     return (
-        <TableContainer sx={{p: 3}}>
-            { 
+        <TableContainer sx={{p: 3, paddingRight: 0}}>
+        {/* removing right padding to eliminate horiz scrollbar */}
+            {
 
               category === "" ? 
 

diff --git a/electron/ui/src/components/MainContent/MainContent.css b/electron/ui/src/components/MainContent/MainContent.css
@@ -0,0 +1,6 @@
+#AppRootContainer {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    max-width: 100%;
+}
diff --git a/electron/ui/src/components/MainContent/MainContent.js b/electron/ui/src/components/MainContent/MainContent.js
@@ -4,6 +4,7 @@
  * Displays nothing if the theme and list of flowsheets is not yet loaded
  * -- this avoids adding conditional rendering logic to the App component.
  */
+import './MainContent.css';
 import {Container} from "@mui/material";
 import Header from "../Boilerplate/Header/Header";
 import {Navigate, Route, Routes} from "react-router-dom";
@@ -17,7 +18,7 @@ export default function MainContent(props) {
         const theme = props.theme;
         const spState = props.subProcState;
         return (
-            <Container>
+            <Container id='AppRootContainer'>
                 <Header theme={theme}/>
                 <Routes>
                     <Route path="flowsheet/:id/config" element={<FlowsheetConfig

diff --git a/electron/ui/src/views/FlowsheetsList/FlowsheetsList.js b/electron/ui/src/views/FlowsheetsList/FlowsheetsList.js
@@ -44,7 +44,7 @@ export default function FlowsheetsList(props) {
   };
 
   return ( 
-    <Container maxWidth="xl">
+    <Container>
       <h2 style={{textAlign:"left"}}>Flowsheets</h2>  
 
       <FlowsheetsListTable rows={rows} handleNewFlowsheetDialogClickOpen={handleNewFlowsheetDialogClickOpen}></FlowsheetsListTable> 
@@ -58,7 +58,7 @@ export default function FlowsheetsList(props) {
       </Snackbar> 
       }
 
-    </Container> 
+    </Container>
   );
 
 }