From 78255fc6a1ef18759670682c1d90cee685315493 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Tue, 20 Sep 2022 12:17:34 +0200
Subject: fix(web/ui): Fix overflow of topology sidebar

This change fixes an issue with the web interface where the sidebar
would overflow due to the large number of rack slots that are displayed
in the sidebar.
---
 .../opendc-web-ui/src/components/topologies/TopologyMap.js     |  4 ++--
 .../opendc-web-ui/src/components/topologies/map/MapStage.js    |  2 +-
 .../src/components/topologies/map/MapStage.module.scss         |  2 --
 .../src/components/topologies/map/RoomContainer.js             | 10 +++++++++-
 .../components/topologies/sidebar/rack/RackSidebar.module.scss | 10 ++++++----
 opendc-web/opendc-web-ui/src/style/index.scss                  |  8 --------
 6 files changed, 18 insertions(+), 18 deletions(-)

(limited to 'opendc-web')

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js b/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
index 47235c7e..ff583750 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
@@ -55,9 +55,9 @@ function TopologyMap() {
             </EmptyState>
         </Bullseye>
     ) : (
-        <Drawer isExpanded={isExpanded} className="full-height">
+        <Drawer isExpanded={isExpanded}>
             <DrawerContent panelContent={panelContent}>
-                <DrawerContentBody>
+                <DrawerContentBody style={{ position: 'relative' }}>
                     <MapStage hotkeysRef={hotkeysRef} />
                     <Collapse onClick={() => setExpanded(true)} />
                 </DrawerContentBody>
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
index 7b96f548..8bf529b2 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
@@ -15,7 +15,7 @@ import Toolbar from './controls/Toolbar'
 function MapStage({ hotkeysRef }) {
     const reduxContext = useContext(ReactReduxContext)
     const stageRef = useRef(null)
-    const { width = 100, height = 100 } = useResizeObserver({ ref: stageRef.current?.attrs?.container })
+    const { width = 500, height = 500 } = useResizeObserver({ ref: stageRef.current?.attrs?.container })
     const [[x, y], setPos] = useState([0, 0])
     const [scale, setScale] = useState(1)
 
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss
index d879b4c8..47c3dde2 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss
@@ -24,8 +24,6 @@
     background-color: var(--pf-global--Color--light-200);
     position: relative;
     display: flex;
-    justify-content: center;
-    align-items: center;
     width: 100%;
     height: 100%;
 }
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
index 191318ee..76785bea 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
@@ -36,7 +36,15 @@ function RoomContainer({ roomId, ...props }) {
         return null
     }
 
-    return <RoomGroup {...props} interactionLevel={interactionLevel} currentRoomInConstruction={currentRoomInConstruction} room={room} onClick={() => dispatch(goFromBuildingToRoom(roomId))} />
+    return (
+        <RoomGroup
+            {...props}
+            interactionLevel={interactionLevel}
+            currentRoomInConstruction={currentRoomInConstruction}
+            room={room}
+            onClick={() => dispatch(goFromBuildingToRoom(roomId))}
+        />
+    )
 }
 
 RoomContainer.propTypes = {
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss
index 6f258aec..f4c8829f 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss
@@ -1,12 +1,14 @@
 .sidebarContainer {
     display: flex;
-    height: 100%;
-    max-height: 100%;
     flex-direction: column;
+
+    height: 100%;
 }
 
 .machineListContainer {
-    flex: 1;
-    overflow-y: scroll;
+    overflow-y: auto;
+
+    flex: 1 0 300px;
+
     margin-top: 10px;
 }
diff --git a/opendc-web/opendc-web-ui/src/style/index.scss b/opendc-web/opendc-web-ui/src/style/index.scss
index ff84e24a..7b7103a4 100644
--- a/opendc-web/opendc-web-ui/src/style/index.scss
+++ b/opendc-web/opendc-web-ui/src/style/index.scss
@@ -22,15 +22,7 @@
 
 body,
 #__next {
-    margin: 0;
-    padding: 0;
-    width: 100%;
     height: 100%;
 
     background: #eee;
 }
-
-.full-height {
-    position: relative;
-    height: 100% !important;
-}
-- 
cgit v1.2.3