Merge pull request #1243 from FlowFuse/gauge-tile-fontsize

UI Gauge - Improve font-size in smaller tiles
FlowFuse · Sep 11, 2024 · 19b6236 · 19b6236
2 parents a62ca12 + e94fdf9
commit 19b6236
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/ui/src/widgets/ui-gauge/types/UIGaugeBattery.vue b/ui/src/widgets/ui-gauge/types/UIGaugeBattery.vue
@@ -155,7 +155,7 @@ export default {
 .nrdb-ui-gauge-battery label {
     font-weight: bold;
     resize: both;
-    font-size: min(2.5rem,max(30cqmin, .5rem));
+    font-size: min(2.5rem,max(25cqmin, .5rem));
     position: relative;
     z-index: 2;
     width: 100%;

diff --git a/ui/src/widgets/ui-gauge/types/UIGaugeTile.vue b/ui/src/widgets/ui-gauge/types/UIGaugeTile.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="nrdb-ui-gauge-tile" :style="{'background-color': valueToColor(props.segments, value), 'color': getTextColor(props.segments, value)}">
-        {{ props.title }}
+        <label>{{ props.title }}</label>
     </div>
 </template>
 
@@ -23,14 +23,18 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .nrdb-ui-gauge-tile {
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 2.5rem;
+    container-type: size;
     font-weight: bold;
     transition: 0.15s background-color;
     border: 1px solid rgb(var(--v-theme-group-outline));
+    label {
+        font-size: min(2.5rem, max(40cqmin, .5rem));
+        text-align: center;
+    }
 }
 </style>