diff --git a/frontend/src/assets/icons.scss b/frontend/src/assets/icons.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend/src/assets/layout.scss b/frontend/src/assets/layout.scss
index 6752ca4..05e1945 100644
--- a/frontend/src/assets/layout.scss
+++ b/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;
 }
diff --git a/frontend/src/assets/main.scss b/frontend/src/assets/main.scss
index b5d0a02..bf5ce72 100644
--- a/frontend/src/assets/main.scss
+++ b/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;
 }
 
 * {
diff --git a/frontend/src/components/SvgGraph.vue b/frontend/src/components/SvgGraph.vue
index 097e1ed..b8175af 100644
--- a/frontend/src/components/SvgGraph.vue
+++ b/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>
diff --git a/frontend/src/views/ChartDefinitionView.vue b/frontend/src/views/ChartDefinitionView.vue
index 7d1c252..5f647ef 100644
--- a/frontend/src/views/ChartDefinitionView.vue
+++ b/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;
 }
diff --git a/frontend/src/views/ChartRenderView.vue b/frontend/src/views/ChartRenderView.vue
index 12243b6..1fb549d 100644
--- a/frontend/src/views/ChartRenderView.vue
+++ b/frontend/src/views/ChartRenderView.vue
@@ -18,22 +18,20 @@ 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
-                        :legend="GraphSide.Left"
-                        include_controls
-                    >
-                        <GraphAxis>
-                            <TelemetryLine
-                                v-for="tlm in charts[x - 1][y - 1]"
-                                :key="tlm.uuid"
-                                :data="tlm.name"
-                            ></TelemetryLine>
-                        </GraphAxis>
-                    </SvgGraph>
-                </div>
+                <SvgGraph
+                    right_axis
+                    cursor
+                    :legend="GraphSide.Left"
+                    include_controls
+                >
+                    <GraphAxis>
+                        <TelemetryLine
+                            v-for="tlm in charts[x - 1][y - 1]"
+                            :key="tlm.uuid"
+                            :data="tlm.name"
+                        ></TelemetryLine>
+                    </GraphAxis>
+                </SvgGraph>
             </template>
         </template>
     </div>
diff --git a/frontend/src/views/ChartView.vue b/frontend/src/views/ChartView.vue
index 3eae67f..d51d682 100644
--- a/frontend/src/views/ChartView.vue
+++ b/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>
diff --git a/frontend/src/views/EmptyPanelView.vue b/frontend/src/views/EmptyPanelView.vue
index 2b8e01d..2e177e4 100644
--- a/frontend/src/views/EmptyPanelView.vue
+++ b/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"
diff --git a/frontend/src/views/GraphView.vue b/frontend/src/views/GraphView.vue
index d6d97cd..7b7f06e 100644
--- a/frontend/src/views/GraphView.vue
+++ b/frontend/src/views/GraphView.vue
@@ -6,32 +6,39 @@ import SvgGraph from '@/components/SvgGraph.vue';
 </script>
 
 <template>
-    <div style="width: 100vw; height: 50vh">
-        <SvgGraph :legend="GraphSide.Left" right_axis include_controls cursor>
-            <Axis>
-                <Line data="simple_producer/time_offset"></Line>
-                <Line data="simple_producer/publish_offset"></Line>
-                <Line data="simple_producer/await_offset"></Line>
-            </Axis>
-        </SvgGraph>
-    </div>
-    <div style="width: 100vw; height: 50vh">
-        <SvgGraph
-            :initial_duration="60 * 1000 * 10"
-            :legend="GraphSide.Right"
-            right_axis
-        >
-            <Axis>
-                <Line data="simple_producer/sin"></Line>
-                <Line data="simple_producer/cos4"></Line>
-                <Line data="simple_producer/sin2"></Line>
-                <Line data="simple_producer/cos"></Line>
-                <Line data="simple_producer/sin3"></Line>
-                <Line data="simple_producer/cos2"></Line>
-                <Line data="simple_producer/sin4"></Line>
-                <Line data="simple_producer/cos3"></Line>
-            </Axis>
-        </SvgGraph>
+    <div class="column">
+        <div style="width: 100vw; height: 50vh">
+            <SvgGraph
+                :legend="GraphSide.Left"
+                right_axis
+                include_controls
+                cursor
+            >
+                <Axis>
+                    <Line data="simple_producer/time_offset"></Line>
+                    <Line data="simple_producer/publish_offset"></Line>
+                    <Line data="simple_producer/await_offset"></Line>
+                </Axis>
+            </SvgGraph>
+        </div>
+        <div style="width: 100vw; height: 50vh">
+            <SvgGraph
+                :initial_duration="60 * 1000 * 10"
+                :legend="GraphSide.Right"
+                right_axis
+            >
+                <Axis>
+                    <Line data="simple_producer/sin"></Line>
+                    <Line data="simple_producer/cos4"></Line>
+                    <Line data="simple_producer/sin2"></Line>
+                    <Line data="simple_producer/cos"></Line>
+                    <Line data="simple_producer/sin3"></Line>
+                    <Line data="simple_producer/cos2"></Line>
+                    <Line data="simple_producer/sin4"></Line>
+                    <Line data="simple_producer/cos3"></Line>
+                </Axis>
+            </SvgGraph>
+        </div>
     </div>
 </template>
 
diff --git a/frontend/src/views/TelemetryListView.vue b/frontend/src/views/TelemetryListView.vue
index f479e9d..dd1398f 100644
--- a/frontend/src/views/TelemetryListView.vue
+++ b/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