fix(dashboard): bad alignment of logs view with small amount of logs

garden-io · Mar 10, 2021 · edaefae · edaefae
1 parent 87c5392
commit edaefae
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 9 deletions.
diff --git a/dashboard/src/components/entity-result.tsx b/dashboard/src/components/entity-result.tsx
@@ -184,7 +184,6 @@ export default ({
           css`
             display: flex;
             flex-direction: column;
-            max-height: calc(100vh - 2rem);
           `
         )}
       >

diff --git a/dashboard/src/components/logs.tsx b/dashboard/src/components/logs.tsx
@@ -109,7 +109,7 @@ class Logs extends Component<Props, State> {
     const filteredLogs = value === "all" ? flatten(Object.values(logs)) : logs[value]
 
     return (
-      <div className="pl-1" style={{ marginTop: "1rem", marginRight: "1rem" }}>
+      <div className="pl-1" style={{ marginTop: "1rem", marginRight: "1rem", width: "100%" }}>
         <div
           className={cls(
             css`

diff --git a/dashboard/src/components/provider.tsx b/dashboard/src/components/provider.tsx
@@ -10,7 +10,6 @@ import React, { useState } from "react"
 import { Frame } from "./frame"
 import Spinner from "./spinner"
 import styled from "@emotion/styled"
-import { menuHeight } from "../containers/menu"
 
 interface ProviderPageProps {
   url: string
@@ -20,7 +19,7 @@ interface ProviderPageProps {
 const ProviderPageWrapper = styled.div`
   border: 0;
   width: 100%;
-  height: calc(100vh - ${menuHeight});
+  height: 100%;
   padding: 1rem;
 `
 

diff --git a/dashboard/src/components/terminal.tsx b/dashboard/src/components/terminal.tsx
@@ -25,6 +25,7 @@ const Term = styled.div`
   border-radius: 2px;
   max-height: calc(100vh - 12rem);
   overflow-y: auto;
+  width: 100%;
 `
 
 const P = styled.p`

diff --git a/dashboard/src/containers/overview.tsx b/dashboard/src/containers/overview.tsx
@@ -22,14 +22,11 @@ import { menuHeight } from "./menu"
 
 const Overview = styled.div`
   padding: 1rem 0.5rem;
-  height: calc(100vh - ${menuHeight});
 `
 
 const Modules = styled.div`
   display: flex;
   flex-wrap: wrap;
-  overflow-y: auto;
-  max-height: calc(100vh - 2rem);
   padding: 0 0 0 1rem;
 `
 

diff --git a/dashboard/src/containers/routes.tsx b/dashboard/src/containers/routes.tsx
@@ -26,9 +26,10 @@ const Overview = React.lazy(() => import("./overview"))
 const RouteWrapper = styled.div`
   display: flex;
   flex-direction: row;
-  flex-grow: 1;
+  align-content: flex-start;
   width: 100%;
-  overflow-y: hidden;
+  height: calc(100vh - ${menuHeight});
+  overflow-y: auto;
 `
 
 const MenuWrapper = styled.div`
-Original file line number
+Diff line change
@@ Expand Up / @@ -184,7 +184,6 @@ export default ({ @@
               css`
                 display: flex;
                 flex-direction: column;
-                max-height: calc(100vh - 2rem);
               `
             )}
           >
@@ Expand Down @@