cleanup css

frontend/src/assets/layout.scss

@@ -28,29 +28,51 @@
 }
 
 .screen {
+    min-height: 100vh;
+    flex-grow: 1;
+}
+
+.screen.limited {
     max-height: 100vh;
-    width: 100%;
 }
 
 .content {
-    margin: 20vh 10vw;
+    padding: 20vh 10vw;
+}
+
+.content.page {
     max-width: 1200px;
 }
 
-.content.full {
-    margin: 5vh 5vw;
-    max-width: none;
+.content.wide {
+    padding-left: 5vw;
+    padding-right: 5vw;
 }
 
-.screen.content {
-    width: calc(100% - 20vw);
-    height: calc(100vh - 40vh);
+.content.tall {
+    padding-top: 5vw;
+    padding-bottom: 5vw;
 }
 
-.screen.content.full {
-    width: calc(100% - 10vw);
-    height: calc(100vh - 10vh);
-}
+//.content {
+//    margin: 20vh 10vw;
+//    max-width: 1200px;
+//}
+//
+//.content.full {
+//    margin: 5vh 5vw;
+//    max-width: none;
+//}
+
+//.screen.content {
+//    width: calc(100% - 20vw);
+//    height: calc(100vh - 40vh);
+//}
+
+//.screen.content.full {
+//    width: calc(100% - 10vw);
+//    height: calc(100vh - 10vh);
+//}
 
 .stretch {
     align-items: stretch;
@@ -76,6 +98,10 @@
     min-height: 0;
 }
 
+.no-min-width {
+    min-width: 0;
+}
+
 .scroll {
     overflow: auto;
 }

frontend/src/assets/main.scss

@@ -8,8 +8,8 @@ body {
     background-color: variables.$background-color;
     display: flex;
     flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
+    justify-content: stretch;
+    align-items: stretch;
     align-content: center;
     min-height: 100vh;
     margin: 0;
@@ -17,15 +17,21 @@ body {
 }
 
 main {
-    width: 100%;
+    flex-grow: 1;
 }
 
 #app {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     justify-content: center;
-    align-items: center;
+    justify-items: center;
     align-content: center;
+    align-items: center;
+}
+
+#app > div {
+    margin-left: auto;
+    margin-right: auto;
 }
 
 * {

frontend/src/components/SvgGraph.vue

@@ -435,6 +435,7 @@ provide<GraphData>(GRAPH_DATA, {
 div.full-size {
     width: 100%;
     height: 100%;
+    position: relative;
 }
 
 div.controls-header {
@@ -446,4 +447,8 @@ div.controls-header {
     gap: 0 1em;
     margin: 0 1em 0 1em;
 }
+
+svg.graph {
+    position: absolute;
+}
 </style>

frontend/src/views/ChartDefinitionView.vue

@@ -302,7 +302,7 @@ function removeTelemetry(index: number) {
 }
 
 .column.tiny_text {
-    font-size: variables.$normal-text-size / 2;
+    font-size: calc(variables.$normal-text-size / 2);
     height: 100%;
     justify-content: space-between;
 }

frontend/src/views/ChartRenderView.vue

@@ -18,7 +18,6 @@ defineProps<{
     >
         <template v-for="y in charts[0].length" :key="y">
             <template v-for="x in charts.length" :key="x">
-                <div class="no-min-height">
                 <SvgGraph
                     right_axis
                     cursor
@@ -33,7 +32,6 @@ defineProps<{
                         ></TelemetryLine>
                     </GraphAxis>
                 </SvgGraph>
-                </div>
             </template>
         </template>
     </div>

frontend/src/views/ChartView.vue

@@ -17,15 +17,15 @@ function closeSettings() {
 </script>
 
 <template>
-    <div class="column stretch screen content full center divider">
+    <div class="column stretch screen content tall wide">
         <template v-if="!settingsOpen">
-            <div class="settings column center" @click="openSettings">
+            <div class="settings column" @click="openSettings">
                 <InlineIcon icon="hamburger menu"></InlineIcon>
             </div>
             <ChartRenderView :charts="settings"></ChartRenderView>
         </template>
         <template v-else>
-            <div class="settings column center" @click="closeSettings">
+            <div class="settings column" @click="closeSettings">
                 <InlineIcon icon="close"></InlineIcon>
             </div>
             <ChartDefinitionView v-model="settings"></ChartDefinitionView>

frontend/src/views/EmptyPanelView.vue

@@ -30,7 +30,7 @@ function onEnter() {
 </script>
 
 <template>
-    <div class="column stretch screen content center no-min-height">
+    <div class="column stretch screen limited content page">
         <div class="row">
             <TextInput
                 autofocus
@@ -41,7 +41,7 @@ function onEnter() {
             ></TextInput>
         </div>
 
-        <div class="row grow stretch">
+        <div class="row grow stretch no-min-height">
             <div class="column grow scroll no-min-height">
                 <PanelHeirarchy
                     :heirarchy="filtered_heirarchy"

frontend/src/views/GraphView.vue

@@ -6,8 +6,14 @@ import SvgGraph from '@/components/SvgGraph.vue';
 </script>
 
 <template>
+    <div class="column">
         <div style="width: 100vw; height: 50vh">
-        <SvgGraph :legend="GraphSide.Left" right_axis include_controls cursor>
+            <SvgGraph
+                :legend="GraphSide.Left"
+                right_axis
+                include_controls
+                cursor
+            >
                 <Axis>
                     <Line data="simple_producer/time_offset"></Line>
                     <Line data="simple_producer/publish_offset"></Line>
@@ -33,6 +39,7 @@ import SvgGraph from '@/components/SvgGraph.vue';
                 </Axis>
             </SvgGraph>
         </div>
+    </div>
 </template>
 
 <style lang="scss">

frontend/src/views/TelemetryListView.vue

@@ -13,7 +13,7 @@ const mousedover = ref<TelemetryDefinition | null>(null);
 </script>
 
 <template>
-    <div class="row stretch screen content center divider">
+    <div class="row stretch screen limited content">
         <div class="column grow2 stretch no-min-height no-basis">
             <div class="row">
                 <TextInput