fix(dashboard): styling issues when scrollbars are always visible

garden-io · Mar 10, 2021 · 3940106 · 3940106
1 parent a18b74b
commit 3940106
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/dashboard/src/components/entity-cards/common.tsx b/dashboard/src/components/entity-cards/common.tsx
@@ -19,7 +19,7 @@ export const EntityCardWrap = styled.div`
   width: 100%;
   margin-top: 1rem;
   padding: 0.75rem 0.75rem 0.4rem 0.75rem;
-  overflow-y: hidden;
+  overflow-x: hidden;
 
   &:first-of-type {
     margin-top: 0;
@@ -34,15 +34,15 @@ export const Header = styled.div`
   width: 100%;
   display: flex;
   justify-content: space-between;
-  overflow-y: hidden;
+  overflow-x: hidden;
 `
 
 export const Content = styled.div`
   width: 100%;
   position: relative;
   max-height: 10rem;
   padding-top: 0.4rem;
-  overflow-y: hidden;
+  overflow-x: hidden;
   &:empty {
     display: none;
   }

diff --git a/dashboard/src/components/graph/graph.scss b/dashboard/src/components/graph/graph.scss
@@ -7,8 +7,7 @@
  */
 
 #chart {
-  height: calc(100vh - 2rem);
-  width: 98%;
+  width: 100%;
   margin: auto;
 
   /* Hide scrollbar (but keep scrolling functionality) */

diff --git a/dashboard/src/components/graph/index.tsx b/dashboard/src/components/graph/index.tsx
@@ -19,6 +19,7 @@ import { SelectGraphNode, StackGraphSupportedFilterKeys } from "../../contexts/u
 import { FiltersButton, Filters } from "../group-filter"
 import { GraphOutputWithNodeStatus, StackGraphNode } from "../../containers/graph"
 import { getTextWidth } from "../../util/helpers"
+import { menuHeight } from "../../containers/menu"
 
 interface Node {
   id: string
@@ -212,7 +213,7 @@ export const StackGraph: React.FC<Props> = ({
         <FiltersButton filters={filters} onFilter={onFilter} />
       </div>
 
-      <div id="chart">
+      <div id="chart" style={{ height: `calc(100vh - ${menuHeight})` }}>
         <Canvas
           readonly
           fit
@@ -233,8 +234,8 @@ export const StackGraph: React.FC<Props> = ({
         className={cls(
           css`
             position: absolute;
-            right: 2rem;
-            bottom: 2.2rem;
+            right: 1.8rem;
+            bottom: 1.2rem;
             display: flex;
             justify-content: flex-end;
             font-size: 0.8em;