use tailwind class

src/views/FriendsLocations/FriendsLocations.vue

@@ -429,6 +429,10 @@
         });
     });
 
+    /**
+     *
+     * @param groupKey
+     */
     function toggleGroupCollapse(groupKey) {
         if (collapsedGroups.has(groupKey)) {
             collapsedGroups.delete(groupKey);
@@ -898,6 +902,9 @@
         }
     });
 
+    /**
+     *
+     */
     async function loadInitialSettings() {
         try {
             const [storedScale, storedSpacing, storedShowSameInstance] = await Promise.all([
@@ -954,7 +961,7 @@
         display: flex;
         gap: 20px;
         align-items: center;
-        padding: 6px 2px 0 2px;
+        padding: 8px 2px 0 2px;
     }
 
     .friend-view__tabs {
@@ -1002,7 +1009,7 @@
     }
 
     .friend-view__virtual-row--header {
-        padding: 4px 10px;
+        padding: 4px 8px;
         padding-bottom: calc(var(--friend-card-gap, 14px) - 4px);
     }
 
@@ -1044,7 +1051,7 @@
     .friend-view__scale-control {
         display: flex;
         align-items: center;
-        gap: 10px;
+        gap: 8px;
         min-width: 160px;
     }
 

src/views/FriendsLocations/components/FriendsLocationsCard.vue

@@ -337,7 +337,7 @@
     }
 
     .friend-card__signature {
-        margin-top: calc(6px * var(--card-spacing));
+        margin-top: calc(8px * var(--card-spacing));
         font-size: calc(13px * var(--card-scale));
         line-height: 1.4;
         overflow: hidden;
@@ -352,7 +352,7 @@
         align-items: center;
         justify-content: center;
         min-height: calc(40px * var(--card-scale));
-        padding: calc(6px * var(--card-scale)) calc(10px * var(--card-scale));
+        padding: calc(8px * var(--card-scale)) calc(8px * var(--card-scale));
         border-radius: calc(var(--radius-lg) * var(--card-scale));
         font-size: calc(12px * var(--card-scale));
         line-height: 1.3;