diff --git a/frontend/src/components/GraphAxis.vue b/frontend/src/components/GraphAxis.vue
index 3cae71b..464d6c2 100644
--- a/frontend/src/components/GraphAxis.vue
+++ b/frontend/src/components/GraphAxis.vue
@@ -63,7 +63,7 @@ const min_y_value = computed(() => {
             const average_y_value = min_y.value + half_diff_y_value;
             return average_y_value - half_diff_y_value * 1.05;
         } else {
-            return -1.0;
+            return -1.05;
         }
     } else {
         if (max_y.value > min_y.value) {
@@ -72,7 +72,7 @@ const min_y_value = computed(() => {
             const average_y_value = Math.log(min_y.value) + half_diff_y_value;
             return Math.exp(average_y_value - half_diff_y_value * 1.05);
         } else {
-            return 0.0;
+            return 0.01;
         }
     }
 });
@@ -86,7 +86,7 @@ const max_y_value = computed(() => {
             const average_y_value = min_y.value + half_diff_y_value;
             return average_y_value + half_diff_y_value * 1.05;
         } else {
-            return 1.0;
+            return 1.05;
         }
     } else {
         if (max_y.value > min_y.value) {
@@ -95,7 +95,7 @@ const max_y_value = computed(() => {
             const average_y_value = Math.log(min_y.value) + half_diff_y_value;
             return Math.exp(average_y_value + half_diff_y_value * 1.05);
         } else {
-            return 1.0;
+            return 1.05;
         }
     }
 });
@@ -127,7 +127,7 @@ const lines = computed(() => {
     const diff_log10 = Math.log10(diff_y_val);
     const diff_log10_fraction = diff_log10 - Math.floor(diff_log10);
     const ticker_location = ticker_locations.find(
-        (location) => location < diff_log10_fraction,
+        (location) => location <= diff_log10_fraction,
     )!;
     const grid_spread = Math.pow(10, Math.floor(diff_log10) + ticker_location);
     const major_spread = grid_spread / 2;
diff --git a/frontend/src/components/SvgGraph.vue b/frontend/src/components/SvgGraph.vue
index 7646082..0572c72 100644
--- a/frontend/src/components/SvgGraph.vue
+++ b/frontend/src/components/SvgGraph.vue
@@ -1,27 +1,46 @@
 <script setup lang="ts">
-import { computed, provide, ref } from 'vue';
+import { computed, onUnmounted, onWatcherCleanup, provide, ref, useTemplateRef, watch } from 'vue';
 import { useNow } from '@/composables/ticker';
 import { GRAPH_DATA, type GraphData, GraphSide } from '@/graph/graph';
 import TimeText from '@/components/TimeText.vue';
 
 const props = defineProps<{
-    width: number;
-    height: number;
     duration?: number;
     utc?: boolean;
     left_axis?: boolean;
     right_axis?: boolean;
     hide_time_labels?: boolean;
     hide_time_ticks?: boolean;
+    include_controls?: boolean;
     legend?: GraphSide;
 }>();
 
-const width = computed(() => {
-    return props.width;
+const divRef = useTemplateRef<HTMLDivElement>("graph-div");
+
+const width = ref(0);
+const height = ref(0);
+
+const controls_height = 32;
+
+const resize_observer = new ResizeObserver((elements) => {
+    for (const element of elements) {
+        if (element.target == divRef.value) {
+            width.value = element.contentBoxSize[0].inlineSize;
+            height.value = element.contentBoxSize[0].blockSize - (props.include_controls ? controls_height : 0);
+        }
+    }
 });
 
-const height = computed(() => {
-    return props.height;
+watch([divRef], ([divRef]) => {
+    if (divRef) {
+        resize_observer.observe(divRef);
+        onWatcherCleanup(() => {
+            resize_observer.unobserve(divRef);
+        });
+    }
+});
+onUnmounted(() => {
+    resize_observer.disconnect();
 });
 
 const now = useNow(33);
@@ -107,8 +126,8 @@ provide<GraphData>(GRAPH_DATA, {
     border_top: border_top,
     min_x: min_x,
     max_x: now,
-    width: () => width.value - border_left.value - border_right.value,
-    height: () => height.value - border_top.value - border_bottom.value,
+    width: () => Math.max(width.value - border_left.value - border_right.value, 0),
+    height: () => Math.max(height.value - border_top.value - border_bottom.value, 0),
     x_map: x_map,
     lines: telemetry_lines,
     max_update_rate: 1000 / 10,
@@ -140,52 +159,60 @@ const lines = computed(() => {
 </script>
 
 <template>
-    <svg ref="svg_graph" class="graph" :width="width" :height="height">
-        <defs>
-            <clipPath id="content">
-                <rect
-                    :x="border_left"
-                    :y="border_top"
-                    :width="width - border_left - border_right"
-                    :height="height - border_top - border_bottom"
-                ></rect>
-            </clipPath>
-            <clipPath id="y_ticker">
-                <rect
-                    :x="0"
-                    :y="border_top"
-                    :width="width"
-                    :height="height - border_top - border_bottom"
-                ></rect>
-            </clipPath>
-            <clipPath id="x_ticker">
-                <rect
-                    :x="border_left"
-                    :y="0"
-                    :width="width - border_left - border_right"
-                    :height="height"
-                ></rect>
-            </clipPath>
-        </defs>
-        <g class="time_tick" clip-path="url(#x_ticker)">
-            <template v-for="tick of lines" :key="tick">
-                <polyline
-                    v-if="!hide_time_ticks"
-                    :points="`${x_map(tick)},${border_top} ${x_map(tick)},${height - border_bottom}`"
-                ></polyline>
-                <TimeText
-                    v-if="!hide_time_labels"
-                    class="bottom_edge"
-                    :x="x_map(tick)"
-                    :y="height - border_bottom + text_offset"
-                    :timestamp="tick"
-                    :utc="props.utc"
-                    :show_millis="line_duration < 1000"
-                ></TimeText>
-            </template>
-        </g>
-        <slot></slot>
-    </svg>
+    <div ref="graph-div" class="full-size">
+        <div v-if="include_controls" class="controls-header" :style="`height: ${controls_height}px`">
+            <div class="grow"></div>
+            <div>
+                <span>Duration Dropdown</span>
+            </div>
+        </div>
+        <svg ref="svg_graph" class="graph" :width="width" :height="height">
+            <defs>
+                <clipPath id="content">
+                    <rect
+                        :x="border_left"
+                        :y="border_top"
+                        :width="Math.max(width - border_left - border_right, 0)"
+                        :height="Math.max(height - border_top - border_bottom, 0)"
+                    ></rect>
+                </clipPath>
+                <clipPath id="y_ticker">
+                    <rect
+                        :x="0"
+                        :y="border_top"
+                        :width="width"
+                        :height="Math.max(height - border_top - border_bottom, 0)"
+                    ></rect>
+                </clipPath>
+                <clipPath id="x_ticker">
+                    <rect
+                        :x="border_left"
+                        :y="0"
+                        :width="Math.max(width - border_left - border_right, 0)"
+                        :height="height"
+                    ></rect>
+                </clipPath>
+            </defs>
+            <g class="time_tick" clip-path="url(#x_ticker)">
+                <template v-for="tick of lines" :key="tick">
+                    <polyline
+                        v-if="!hide_time_ticks"
+                        :points="`${x_map(tick)},${border_top} ${x_map(tick)},${height - border_bottom}`"
+                    ></polyline>
+                    <TimeText
+                        v-if="!hide_time_labels"
+                        class="bottom_edge"
+                        :x="x_map(tick)"
+                        :y="height - border_bottom + text_offset"
+                        :timestamp="tick"
+                        :utc="props.utc"
+                        :show_millis="line_duration < 1000"
+                    ></TimeText>
+                </template>
+            </g>
+            <slot></slot>
+        </svg>
+    </div>
 </template>
 
 <style scoped lang="scss">
@@ -201,4 +228,24 @@ const lines = computed(() => {
     stroke: variables.$time-tick;
     fill: variables.$time-tick;
 }
+
+div.full-size {
+    width: 100%;
+    height: 100%;
+}
+
+div.controls-header {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    align-content: stretch;
+    gap: 1em 0;
+    margin: 0 1em 0 1em;
+}
+
+div.controls-header > div.grow {
+    flex-grow: 1;
+}
+
 </style>
diff --git a/frontend/src/graph/graph.ts b/frontend/src/graph/graph.ts
index e31f26b..43ea28d 100644
--- a/frontend/src/graph/graph.ts
+++ b/frontend/src/graph/graph.ts
@@ -24,3 +24,4 @@ export interface GraphData {
     legend_y_stride: MaybeRefOrGetter<number>;
     legend_width: MaybeRefOrGetter<number>;
 }
+
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index b47a155..bd14a01 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useWebsocket, WEBSOCKET_SYMBOL } from '@/composables/websocket';
 import { provide } from 'vue';
-import Graph from '@/components/SvgGraph.vue';
 import Axis from '@/components/GraphAxis.vue';
 import Line from '@/components/TelemetryLine.vue';
 import { GraphSide } from '@/graph/graph';
+import SvgGraph from '@/components/SvgGraph.vue';
 
 const websocket = useWebsocket();
 provide(WEBSOCKET_SYMBOL, websocket);
@@ -12,62 +12,61 @@ provide(WEBSOCKET_SYMBOL, websocket);
 
 <template>
     <main>
-        <Graph
-            :width="800"
-            :height="400"
-            :right_axis="true"
-            :legend="GraphSide.Left"
-        >
-            <Axis>
-                <Line data="simple_producer/time_offset"></Line>
-                <Line data="simple_producer/publish_offset"></Line>
-                <Line data="simple_producer/await_offset"></Line>
-            </Axis>
-        </Graph>
-        <Graph
-            :width="800"
-            :height="400"
-            :duration="60 * 1000 * 10"
-            :right_axis="true"
-            :legend="GraphSide.Right"
-        >
-            <Axis>
-                <Line
-                    data="simple_producer/sin"
-                    :minimum_separation="2000"
-                ></Line>
-                <Line
-                    data="simple_producer/cos4"
-                    :minimum_separation="2000"
-                ></Line>
-                <Line
-                    data="simple_producer/sin2"
-                    :minimum_separation="2000"
-                ></Line>
-                <Line
-                    data="simple_producer/cos"
-                    :minimum_separation="2000"
-                ></Line>
-                <Line
-                    data="simple_producer/sin3"
-                    :minimum_separation="2000"
-                ></Line>
-                <Line
-                    data="simple_producer/cos2"
-                    :minimum_separation="2000"
-                ></Line>
-                <Line
-                    data="simple_producer/sin4"
-                    :minimum_separation="2000"
-                ></Line>
-                <Line
-                    data="simple_producer/cos3"
-                    :minimum_separation="2000"
-                ></Line>
-            </Axis>
-        </Graph>
-        <Graph :width="800" :height="400" :duration="5 * 1000"> </Graph>
-        <Graph :width="800" :height="400" :duration="2 * 1000"> </Graph>
+        <div style="width: 100vw; height: 50vh">
+            <SvgGraph
+                :legend="GraphSide.Left"
+                right_axis
+                include_controls
+            >
+                <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
+                :duration="60 * 1000 * 10"
+                :legend="GraphSide.Right"
+                right_axis
+            >
+                <Axis>
+                    <Line
+                        data="simple_producer/sin"
+                        :minimum_separation="1000"
+                    ></Line>
+                    <Line
+                        data="simple_producer/cos4"
+                        :minimum_separation="1000"
+                    ></Line>
+                    <Line
+                        data="simple_producer/sin2"
+                        :minimum_separation="1000"
+                    ></Line>
+                    <Line
+                        data="simple_producer/cos"
+                        :minimum_separation="1000"
+                    ></Line>
+                    <Line
+                        data="simple_producer/sin3"
+                        :minimum_separation="1000"
+                    ></Line>
+                    <Line
+                        data="simple_producer/cos2"
+                        :minimum_separation="1000"
+                    ></Line>
+                    <Line
+                        data="simple_producer/sin4"
+                        :minimum_separation="1000"
+                    ></Line>
+                    <Line
+                        data="simple_producer/cos3"
+                        :minimum_separation="1000"
+                    ></Line>
+                </Axis>
+            </SvgGraph>
+        </div>
     </main>
 </template>