From 227a2df0a324d3d61183816e6480c32ea84ff668 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Wed, 18 Sep 2024 22:05:19 -0300
Subject: [PATCH] edit-mode: Resize mini-widget placeholders if they overflow
 container

---
 src/components/EditMenu.vue | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue
index e358eba38..628d49cc9 100644
--- a/src/components/EditMenu.vue
+++ b/src/components/EditMenu.vue
@@ -520,6 +520,7 @@
     >
       <div
         v-for="miniWidget in availableMiniWidgetTypes"
+        :ref="(el) => (miniWidgetContainers[miniWidget.component] = el as HTMLElement)"
         :key="miniWidget.hash"
         class="flex flex-col items-center justify-between rounded-md bg-[#273842] hover:brightness-125 h-[90%] aspect-square cursor-pointer elevation-4 overflow-clip"
       >
@@ -867,6 +868,24 @@ onMounted(() => {
 
 const widgetMode = ref('Regular widgets' || 'Mini widgets')
 
+// Resize mini widgets so they fit the layout when the widget mode is set to mini widgets
+const miniWidgetContainers = ref<Record<string, HTMLElement>>({})
+watch(widgetMode, () => {
+  if (widgetMode.value !== 'Mini widgets') return
+  nextTick(() => {
+    Object.values(miniWidgetContainers.value).forEach((element) => {
+      if (element.scrollWidth > element.clientWidth) {
+        let scale = 1
+        while (element.scrollWidth > element.clientWidth) {
+          scale -= 0.01
+          const actualElement = element.children[1] as HTMLElement
+          actualElement.style.scale = `${scale}`
+        }
+      }
+    })
+  })
+})
+
 const availableVehicleTypes = computed(() => Object.keys(MavType))
 
 const vehicleTypesAssignedToCurrentProfile = computed({