increase frontend flexibility

frontend/src/views/ChartView.vue

@@ -4,6 +4,9 @@ import InlineIcon from '@/components/InlineIcon.vue';
 import ChartDefinitionView from '@/views/ChartDefinitionView.vue';
 import type { TelemetryDefinition } from '@/composables/telemetry.ts';
 import ChartRenderView from '@/views/ChartRenderView.vue';
+import ScreenLayout from '@/components/layout/ScreenLayout.vue';
+import { Direction } from '@/composables/Direction.ts';
+import { ScreenType } from '@/composables/ScreenType.ts';
 
 const settingsOpen = ref(true);
 const settings = ref<TelemetryDefinition[][][]>([]);
@@ -17,7 +20,7 @@ function closeSettings() {
 </script>
 
 <template>
-    <div class="column stretch screen content tall wide">
+    <ScreenLayout :direction="Direction.Column" :type="ScreenType.WideTall">
         <template v-if="!settingsOpen">
             <div class="settings column" @click="openSettings">
                 <InlineIcon icon="hamburger menu"></InlineIcon>
@@ -30,7 +33,7 @@ function closeSettings() {
             </div>
             <ChartDefinitionView v-model="settings"></ChartDefinitionView>
         </template>
-    </div>
+    </ScreenLayout>
 </template>
 
 <style scoped lang="scss">

frontend/src/views/EmptyPanelView.vue

@@ -8,6 +8,9 @@ import {
 import PanelHeirarchy from '@/components/PanelHeirarchy.vue';
 import router from '@/router';
 import TextInput from '@/components/TextInput.vue';
+import ScreenLayout from '@/components/layout/ScreenLayout.vue';
+import { Direction } from '@/composables/Direction.ts';
+import { ScreenType } from '@/composables/ScreenType.ts';
 
 const searchValue = ref('');
 
@@ -30,7 +33,7 @@ function onEnter() {
 </script>
 
 <template>
-    <div class="column stretch screen limited content page">
+    <ScreenLayout :direction="Direction.Column" :type="ScreenType.Page" limit>
         <div class="row">
             <TextInput
                 autofocus
@@ -52,7 +55,7 @@ function onEnter() {
                 </div>
             </div>
         </div>
-    </div>
+    </ScreenLayout>
 </template>
 
 <style scoped lang="scss">

frontend/src/views/PanelTest.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import GridLayout from '@/components/layout/GridLayout.vue';
+import TelemetryValue from '@/components/TelemetryValue.vue';
+</script>
+
+<template>
+    <GridLayout :cols="2" equal_col_width>
+        <span class="justify-right"> simple_producer/cos </span>
+        <TelemetryValue data="simple_producer/cos"></TelemetryValue>
+
+        <span class="justify-right"> simple_producer/sin </span>
+        <TelemetryValue data="simple_producer/sin"></TelemetryValue>
+
+        <span class="justify-right"> simple_producer/cos2 </span>
+        <TelemetryValue data="simple_producer/cos2"></TelemetryValue>
+
+        <span class="justify-right"> simple_producer/sin2 </span>
+        <TelemetryValue data="simple_producer/sin2"></TelemetryValue>
+    </GridLayout>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/variables';
+
+.justify-right {
+    justify-self: end;
+}
+</style>

frontend/src/views/TelemetryListView.vue

@@ -5,6 +5,9 @@ import TelemetryList from '@/components/TelemetryList.vue';
 import type { TelemetryDefinition } from '@/composables/telemetry';
 import TelemetryInfo from '@/components/TelemetryInfo.vue';
 import FlexDivider from '@/components/FlexDivider.vue';
+import ScreenLayout from '@/components/layout/ScreenLayout.vue';
+import { Direction } from '@/composables/Direction.ts';
+import { ScreenType } from '@/composables/ScreenType.ts';
 
 const searchValue = ref('');
 
@@ -13,7 +16,7 @@ const mousedover = ref<TelemetryDefinition | null>(null);
 </script>
 
 <template>
-    <div class="row stretch screen limited content">
+    <ScreenLayout :direction="Direction.Row" :type="ScreenType.Standard" limit>
         <div class="column grow2 stretch no-min-height no-basis">
             <div class="row">
                 <TextInput
@@ -44,7 +47,7 @@ const mousedover = ref<TelemetryDefinition | null>(null);
                 :selection="selected"
             ></TelemetryInfo>
         </div>
-    </div>
+    </ScreenLayout>
 </template>
 
 <style lang="scss">