From a2f76d1a3e8fcd67f01251e3655157dc8d7f9988 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Wed, 12 Nov 2025 16:12:45 +0900
Subject: [PATCH] feat: add spacing option to friends locations card and
 favtories cards (#1477)

---
 src/views/Favorites/FavoritesAvatar.vue       |  68 ++++++---
 src/views/Favorites/FavoritesFriend.vue       |  70 ++++++---
 src/views/Favorites/FavoritesWorld.vue        |  70 ++++++---
 .../composables/useFavoritesCardScaling.js    | 133 ++++++++++++++----
 .../FriendsLocations/FriendsLocations.vue     |  51 +++++--
 .../components/FriendsLocationsCard.vue       |  24 ++--
 6 files changed, 320 insertions(+), 96 deletions(-)

diff --git a/src/views/Favorites/FavoritesAvatar.vue b/src/views/Favorites/FavoritesAvatar.vue
index e42c5fe1..f7eb1482 100644
--- a/src/views/Favorites/FavoritesAvatar.vue
+++ b/src/views/Favorites/FavoritesAvatar.vue
@@ -21,10 +21,10 @@
                     <el-button :icon="MoreFilled" size="small" circle />
                     <template #dropdown>
                         <el-dropdown-menu class="favorites-dropdown">
-                            <li class="favorites-dropdown__scale" @click.stop>
-                                <div class="favorites-dropdown__scale-header">
+                            <li class="favorites-dropdown__control" @click.stop>
+                                <div class="favorites-dropdown__control-header">
                                     <span>Scale</span>
-                                    <span class="favorites-dropdown__scale-value">{{ avatarCardScalePercent }}%</span>
+                                    <span class="favorites-dropdown__control-value">{{ avatarCardScalePercent }}%</span>
                                 </div>
                                 <el-slider
                                     v-model="avatarCardScale"
@@ -34,6 +34,21 @@
                                     :step="avatarCardScaleSlider.step"
                                     :show-tooltip="false" />
                             </li>
+                            <li class="favorites-dropdown__control" @click.stop>
+                                <div class="favorites-dropdown__control-header">
+                                    <span>Spacing</span>
+                                    <span class="favorites-dropdown__control-value">
+                                        {{ avatarCardSpacingPercent }}%
+                                    </span>
+                                </div>
+                                <el-slider
+                                    v-model="avatarCardSpacing"
+                                    class="favorites-dropdown__slider"
+                                    :min="avatarCardSpacingSlider.min"
+                                    :max="avatarCardSpacingSlider.max"
+                                    :step="avatarCardSpacingSlider.step"
+                                    :show-tooltip="false" />
+                            </li>
                             <el-dropdown-item @click="handleAvatarImportClick">
                                 {{ t('view.favorite.import') }}
                             </el-dropdown-item>
@@ -531,17 +546,31 @@
 
     const {
         cardScale: avatarCardScale,
+        cardSpacing: avatarCardSpacing,
         slider: avatarCardScaleSlider,
+        spacingSlider: avatarCardSpacingSlider,
         containerRef: avatarFavoritesContainerRef,
         gridStyle: avatarFavoritesGridStyle
     } = useFavoritesCardScaling({
         configKey: 'VRCX_FavoritesAvatarCardScale',
+        spacingConfigKey: 'VRCX_FavoritesAvatarCardSpacing',
         min: 0.6,
         max: 1,
-        step: 0.01
+        step: 0.01,
+        spacingMin: 0.5,
+        spacingMax: 1.5,
+        spacingStep: 0.05,
+        basePaddingY: 8,
+        basePaddingX: 10,
+        baseContentGap: 10,
+        baseActionGap: 8,
+        baseActionGroupGap: 6,
+        baseActionMargin: 8,
+        baseCheckboxMargin: 10
     });
 
     const avatarCardScalePercent = computed(() => Math.round(avatarCardScale.value * 100));
+    const avatarCardSpacingPercent = computed(() => Math.round(avatarCardSpacing.value * 100));
 
     const avatarExportDialogVisible = ref(false);
     const avatarFavoriteSearch = ref('');
@@ -1460,7 +1489,6 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        width: 100%;
         border: none;
         background: transparent;
         border-radius: 8px;
@@ -1469,7 +1497,8 @@
         cursor: pointer;
         color: inherit;
         transition: background-color 0.15s ease;
-        height: 32px;
+        min-height: 32px;
+        align-self: stretch;
     }
 
     .favorites-group-menu__item:hover {
@@ -1500,7 +1529,6 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        width: 100%;
         border: none;
         background: transparent;
         padding: 6px 10px;
@@ -1509,7 +1537,8 @@
         color: inherit;
         font-size: 13px;
         transition: background-color 0.15s ease;
-        height: 32px;
+        min-height: 32px;
+        align-self: stretch;
     }
 
     .group-visibility-menu__item:hover,
@@ -1625,7 +1654,7 @@
         box-sizing: border-box;
         border: 1px solid var(--el-border-color);
         border-radius: calc(8px * var(--favorites-card-scale, 1));
-        padding: calc(8px * var(--favorites-card-scale, 1)) calc(10px * var(--favorites-card-scale, 1));
+        padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
         cursor: pointer;
         background: var(--el-bg-color);
         transition:
@@ -1650,7 +1679,7 @@
     :deep(.favorites-search-card__content) {
         display: flex;
         align-items: center;
-        gap: calc(10px * var(--favorites-card-scale, 1));
+        gap: var(--favorites-card-content-gap, 10px);
         flex: 1;
         min-width: 0;
     }
@@ -1720,8 +1749,8 @@
     :deep(.favorites-search-card__actions) {
         display: flex;
         flex-direction: column;
-        gap: 8px;
-        margin-left: 8px;
+        gap: var(--favorites-card-action-gap, 8px);
+        margin-left: var(--favorites-card-action-margin, 8px);
         align-items: center;
         justify-content: center;
         flex: 0 0 auto;
@@ -1740,7 +1769,7 @@
 
     :deep(.favorites-search-card__action-group) {
         display: flex;
-        gap: 6px;
+        gap: var(--favorites-card-action-group-gap, 6px);
         width: 100%;
     }
 
@@ -1751,7 +1780,7 @@
     :deep(.favorites-search-card__action--checkbox) {
         align-items: center;
         justify-content: flex-end;
-        margin-right: 10px;
+        margin-right: var(--favorites-card-checkbox-margin, 10px);
     }
 
     :deep(.favorites-search-card__action--checkbox .el-checkbox) {
@@ -1771,15 +1800,18 @@
         height: 100%;
     }
 
-    .favorites-dropdown__scale {
+    .favorites-dropdown__control {
         list-style: none;
         padding: 12px 16px 8px;
-        border-bottom: 1px solid var(--el-border-color-lighter);
         min-width: 220px;
         cursor: default;
     }
 
-    .favorites-dropdown__scale-header {
+    .favorites-dropdown__control:not(:last-child) {
+        border-bottom: 1px solid var(--el-border-color-lighter);
+    }
+
+    .favorites-dropdown__control-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -1789,7 +1821,7 @@
         margin-bottom: 6px;
     }
 
-    .favorites-dropdown__scale-value {
+    .favorites-dropdown__control-value {
         font-size: 12px;
         color: var(--el-text-color-secondary);
     }
diff --git a/src/views/Favorites/FavoritesFriend.vue b/src/views/Favorites/FavoritesFriend.vue
index e71c2877..36d82378 100644
--- a/src/views/Favorites/FavoritesFriend.vue
+++ b/src/views/Favorites/FavoritesFriend.vue
@@ -21,10 +21,12 @@
                     <el-button :icon="MoreFilled" size="small" circle @click.stop />
                     <template #dropdown>
                         <el-dropdown-menu class="favorites-dropdown">
-                            <li class="favorites-dropdown__scale" @click.stop>
-                                <div class="favorites-dropdown__scale-header">
+                            <li class="favorites-dropdown__control" @click.stop>
+                                <div class="favorites-dropdown__control-header">
                                     <span>Scale</span>
-                                    <span class="favorites-dropdown__scale-value">{{ friendCardScalePercent }}%</span>
+                                    <span class="favorites-dropdown__control-value">
+                                        {{ friendCardScalePercent }}%
+                                    </span>
                                 </div>
                                 <el-slider
                                     v-model="friendCardScale"
@@ -34,6 +36,21 @@
                                     :step="friendCardScaleSlider.step"
                                     :show-tooltip="false" />
                             </li>
+                            <li class="favorites-dropdown__control" @click.stop>
+                                <div class="favorites-dropdown__control-header">
+                                    <span>Spacing</span>
+                                    <span class="favorites-dropdown__control-value">
+                                        {{ friendCardSpacingPercent }}%
+                                    </span>
+                                </div>
+                                <el-slider
+                                    v-model="friendCardSpacing"
+                                    class="favorites-dropdown__slider"
+                                    :min="friendCardSpacingSlider.min"
+                                    :max="friendCardSpacingSlider.max"
+                                    :step="friendCardSpacingSlider.step"
+                                    :show-tooltip="false" />
+                            </li>
                             <el-dropdown-item @click="handleFriendImportClick">
                                 {{ t('view.favorite.import') }}
                             </el-dropdown-item>
@@ -295,17 +312,31 @@
 
     const {
         cardScale: friendCardScale,
+        cardSpacing: friendCardSpacing,
         slider: friendCardScaleSlider,
+        spacingSlider: friendCardSpacingSlider,
         containerRef: friendFavoritesContainerRef,
         gridStyle: friendFavoritesGridStyle
     } = useFavoritesCardScaling({
         configKey: 'VRCX_FavoritesFriendCardScale',
+        spacingConfigKey: 'VRCX_FavoritesFriendCardSpacing',
         min: 0.6,
         max: 1,
-        step: 0.01
+        step: 0.01,
+        spacingMin: 0.5,
+        spacingMax: 1.5,
+        spacingStep: 0.05,
+        basePaddingY: 8,
+        basePaddingX: 10,
+        baseContentGap: 10,
+        baseActionGap: 8,
+        baseActionGroupGap: 6,
+        baseActionMargin: 8,
+        baseCheckboxMargin: 10
     });
 
     const friendCardScalePercent = computed(() => Math.round(friendCardScale.value * 100));
+    const friendCardSpacingPercent = computed(() => Math.round(friendCardSpacing.value * 100));
 
     const friendExportDialogVisible = ref(false);
     const friendFavoriteSearch = ref('');
@@ -808,7 +839,6 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        width: 100%;
         border: none;
         background: transparent;
         border-radius: 8px;
@@ -817,7 +847,8 @@
         cursor: pointer;
         color: inherit;
         transition: background-color 0.15s ease;
-        height: 32px;
+        min-height: 32px;
+        align-self: stretch;
     }
 
     .favorites-group-menu__item:hover {
@@ -848,7 +879,6 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        width: 100%;
         border: none;
         background: transparent;
         padding: 6px 10px;
@@ -857,7 +887,8 @@
         color: inherit;
         font-size: 13px;
         transition: background-color 0.15s ease;
-        height: 32px;
+        min-height: 32px;
+        align-self: stretch;
     }
 
     .group-visibility-menu__item:hover,
@@ -973,7 +1004,7 @@
         box-sizing: border-box;
         border: 1px solid var(--el-border-color);
         border-radius: calc(8px * var(--favorites-card-scale, 1));
-        padding: calc(8px * var(--favorites-card-scale, 1)) calc(10px * var(--favorites-card-scale, 1));
+        padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
         cursor: pointer;
         background: var(--el-bg-color);
         transition:
@@ -998,7 +1029,7 @@
     :deep(.favorites-search-card__content) {
         display: flex;
         align-items: center;
-        gap: calc(10px * var(--favorites-card-scale, 1));
+        gap: var(--favorites-card-content-gap, 10px);
         flex: 1;
         min-width: 0;
     }
@@ -1068,8 +1099,8 @@
     :deep(.favorites-search-card__actions) {
         display: flex;
         flex-direction: column;
-        gap: 8px;
-        margin-left: 8px;
+        gap: var(--favorites-card-action-gap, 8px);
+        margin-left: var(--favorites-card-action-margin, 8px);
         align-items: center;
         justify-content: center;
         flex: 0 0 auto;
@@ -1088,7 +1119,7 @@
 
     :deep(.favorites-search-card__action-group) {
         display: flex;
-        gap: 6px;
+        gap: var(--favorites-card-action-group-gap, 6px);
         width: 100%;
     }
 
@@ -1099,7 +1130,7 @@
     :deep(.favorites-search-card__action--checkbox) {
         align-items: center;
         justify-content: flex-end;
-        margin-right: 10px;
+        margin-right: var(--favorites-card-checkbox-margin, 10px);
     }
 
     :deep(.favorites-search-card__action--checkbox .el-checkbox) {
@@ -1127,15 +1158,18 @@
         height: 100%;
     }
 
-    .favorites-dropdown__scale {
+    .favorites-dropdown__control {
         list-style: none;
         padding: 12px 16px 8px;
-        border-bottom: 1px solid var(--el-border-color-lighter);
         min-width: 220px;
         cursor: default;
     }
 
-    .favorites-dropdown__scale-header {
+    .favorites-dropdown__control:not(:last-child) {
+        border-bottom: 1px solid var(--el-border-color-lighter);
+    }
+
+    .favorites-dropdown__control-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -1145,7 +1179,7 @@
         margin-bottom: 6px;
     }
 
-    .favorites-dropdown__scale-value {
+    .favorites-dropdown__control-value {
         font-size: 12px;
         color: var(--el-text-color-secondary);
     }
diff --git a/src/views/Favorites/FavoritesWorld.vue b/src/views/Favorites/FavoritesWorld.vue
index bb92e35e..1fcce882 100644
--- a/src/views/Favorites/FavoritesWorld.vue
+++ b/src/views/Favorites/FavoritesWorld.vue
@@ -21,10 +21,12 @@
                     <el-button :icon="MoreFilled" size="small" circle />
                     <template #dropdown>
                         <el-dropdown-menu class="favorites-dropdown">
-                            <li class="favorites-dropdown__scale" @click.stop>
-                                <div class="favorites-dropdown__scale-header">
+                            <li class="favorites-dropdown__control" @click.stop>
+                                <div class="favorites-dropdown__control-header">
                                     <span>Scale</span>
-                                    <span class="favorites-dropdown__scale-value">{{ worldCardScalePercent }}%</span>
+                                    <span class="favorites-dropdown__control-value">
+                                        {{ worldCardScalePercent }}%
+                                    </span>
                                 </div>
                                 <el-slider
                                     v-model="worldCardScale"
@@ -34,6 +36,21 @@
                                     :step="worldCardScaleSlider.step"
                                     :show-tooltip="false" />
                             </li>
+                            <li class="favorites-dropdown__control" @click.stop>
+                                <div class="favorites-dropdown__control-header">
+                                    <span>Spacing</span>
+                                    <span class="favorites-dropdown__control-value">
+                                        {{ worldCardSpacingPercent }}%
+                                    </span>
+                                </div>
+                                <el-slider
+                                    v-model="worldCardSpacing"
+                                    class="favorites-dropdown__slider"
+                                    :min="worldCardSpacingSlider.min"
+                                    :max="worldCardSpacingSlider.max"
+                                    :step="worldCardSpacingSlider.step"
+                                    :show-tooltip="false" />
+                            </li>
                             <el-dropdown-item @click="handleWorldImportClick">
                                 {{ t('view.favorite.import') }}
                             </el-dropdown-item>
@@ -439,17 +456,31 @@
 
     const {
         cardScale: worldCardScale,
+        cardSpacing: worldCardSpacing,
         slider: worldCardScaleSlider,
+        spacingSlider: worldCardSpacingSlider,
         containerRef: worldFavoritesContainerRef,
         gridStyle: worldFavoritesGridStyle
     } = useFavoritesCardScaling({
         configKey: 'VRCX_FavoritesWorldCardScale',
+        spacingConfigKey: 'VRCX_FavoritesWorldCardSpacing',
         min: 0.6,
         max: 1,
-        step: 0.01
+        step: 0.01,
+        spacingMin: 0.5,
+        spacingMax: 1.5,
+        spacingStep: 0.05,
+        basePaddingY: 8,
+        basePaddingX: 10,
+        baseContentGap: 10,
+        baseActionGap: 8,
+        baseActionGroupGap: 6,
+        baseActionMargin: 8,
+        baseCheckboxMargin: 10
     });
 
     const worldCardScalePercent = computed(() => Math.round(worldCardScale.value * 100));
+    const worldCardSpacingPercent = computed(() => Math.round(worldCardSpacing.value * 100));
 
     const worldGroupVisibilityOptions = ref(['public', 'friends', 'private']);
     const worldSplitterSize = ref(260);
@@ -1324,7 +1355,6 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        width: 100%;
         border: none;
         background: transparent;
         border-radius: 8px;
@@ -1333,7 +1363,8 @@
         cursor: pointer;
         color: inherit;
         transition: background-color 0.15s ease;
-        height: 32px;
+        min-height: 32px;
+        align-self: stretch;
     }
     .favorites-group-menu__item:hover {
         background-color: var(--el-menu-hover-bg-color);
@@ -1363,7 +1394,6 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        width: 100%;
         border: none;
         background: transparent;
         padding: 6px 10px;
@@ -1372,7 +1402,8 @@
         color: inherit;
         font-size: 13px;
         transition: background-color 0.15s ease;
-        height: 32px;
+        min-height: 32px;
+        align-self: stretch;
     }
 
     .group-visibility-menu__item:hover,
@@ -1488,7 +1519,7 @@
         box-sizing: border-box;
         border: 1px solid var(--el-border-color);
         border-radius: calc(8px * var(--favorites-card-scale, 1));
-        padding: calc(8px * var(--favorites-card-scale, 1)) calc(10px * var(--favorites-card-scale, 1));
+        padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
         cursor: pointer;
         background: var(--el-bg-color);
         transition:
@@ -1513,7 +1544,7 @@
     :deep(.favorites-search-card__content) {
         display: flex;
         align-items: center;
-        gap: calc(10px * var(--favorites-card-scale, 1));
+        gap: var(--favorites-card-content-gap, 10px);
         flex: 1;
         min-width: 0;
     }
@@ -1583,8 +1614,8 @@
     :deep(.favorites-search-card__actions) {
         display: flex;
         flex-direction: column;
-        gap: 8px;
-        margin-left: 8px;
+        gap: var(--favorites-card-action-gap, 8px);
+        margin-left: var(--favorites-card-action-margin, 8px);
         align-items: center;
         justify-content: center;
         flex: 0 0 auto;
@@ -1603,7 +1634,7 @@
 
     :deep(.favorites-search-card__action-group) {
         display: flex;
-        gap: 6px;
+        gap: var(--favorites-card-action-group-gap, 6px);
         width: 100%;
     }
 
@@ -1614,7 +1645,7 @@
     :deep(.favorites-search-card__action--checkbox) {
         align-items: center;
         justify-content: flex-end;
-        margin-right: 10px;
+        margin-right: var(--favorites-card-checkbox-margin, 10px);
     }
 
     :deep(.favorites-search-card__action--checkbox .el-checkbox) {
@@ -1634,15 +1665,18 @@
         height: 100%;
     }
 
-    .favorites-dropdown__scale {
+    .favorites-dropdown__control {
         list-style: none;
         padding: 12px 16px 8px;
-        border-bottom: 1px solid var(--el-border-color-lighter);
         min-width: 220px;
         cursor: default;
     }
 
-    .favorites-dropdown__scale-header {
+    .favorites-dropdown__control:not(:last-child) {
+        border-bottom: 1px solid var(--el-border-color-lighter);
+    }
+
+    .favorites-dropdown__control-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -1652,7 +1686,7 @@
         margin-bottom: 6px;
     }
 
-    .favorites-dropdown__scale-value {
+    .favorites-dropdown__control-value {
         font-size: 12px;
         color: var(--el-text-color-secondary);
     }
diff --git a/src/views/Favorites/composables/useFavoritesCardScaling.js b/src/views/Favorites/composables/useFavoritesCardScaling.js
index dac23bc6..04818721 100644
--- a/src/views/Favorites/composables/useFavoritesCardScaling.js
+++ b/src/views/Favorites/composables/useFavoritesCardScaling.js
@@ -28,12 +28,33 @@ export function useFavoritesCardScaling(options = {}) {
         max: options.max ?? 1,
         step: options.step ?? 0.01
     };
+    const spacingSlider = {
+        min: options.spacingMin ?? 0.5,
+        max: options.spacingMax ?? 1.5,
+        step: options.spacingStep ?? 0.05
+    };
     const baseWidth = options.baseWidth ?? 260;
     const baseGap = options.baseGap ?? 12;
     const gapStep = options.gapStep ?? 8;
     const configKey = options.configKey ?? '';
+    const spacingConfigKey = options.spacingConfigKey ?? '';
+    const basePaddingY = options.basePaddingY ?? 8;
+    const basePaddingX = options.basePaddingX ?? 10;
+    const baseContentGap = options.baseContentGap ?? 10;
+    const baseActionGap = options.baseActionGap ?? 8;
+    const baseActionGroupGap = options.baseActionGroupGap ?? 6;
+    const baseActionMargin = options.baseActionMargin ?? 8;
+    const baseCheckboxMargin = options.baseCheckboxMargin ?? 10;
+    const minGap = options.minGap ?? 4;
+    const minPadding = options.minPadding ?? 4;
+    const defaultSpacing = clamp(
+        options.defaultSpacing ?? 1,
+        spacingSlider.min,
+        spacingSlider.max
+    );
 
     const cardScaleBase = ref(1);
+    const cardSpacingBase = ref(defaultSpacing);
     const containerRef = ref(null);
     const containerWidth = ref(0);
 
@@ -69,15 +90,59 @@ export function useFavoritesCardScaling(options = {}) {
             const nextValue = clamp(Number(value) || 1, slider.min, slider.max);
             cardScaleBase.value = nextValue;
             if (configKey) {
-                configRepository.setString(configKey, nextValue);
+                configRepository.setString(configKey, String(nextValue));
+            }
+        }
+    });
+
+    const cardSpacing = computed({
+        get: () => cardSpacingBase.value,
+        set: (value) => {
+            const nextValue = clamp(
+                Number(value) || 1,
+                spacingSlider.min,
+                spacingSlider.max
+            );
+            cardSpacingBase.value = nextValue;
+            if (spacingConfigKey) {
+                configRepository.setString(spacingConfigKey, String(nextValue));
             }
         }
     });
 
     const gridStyle = computed(() => {
         const minWidth = baseWidth * cardScale.value;
-        const rawGap = baseGap + (cardScale.value - 1) * gapStep;
-        const gap = Math.max(6, rawGap);
+        const spacing = cardSpacing.value;
+        const adjustedGapBase = baseGap + (cardScale.value - 1) * gapStep;
+        const gap = Math.max(minGap, adjustedGapBase * spacing);
+        const paddingY = Math.max(
+            minPadding,
+            basePaddingY * cardScale.value * spacing
+        );
+        const paddingX = Math.max(
+            minPadding,
+            basePaddingX * cardScale.value * spacing
+        );
+        const contentGap = Math.max(
+            minPadding,
+            baseContentGap * cardScale.value * spacing
+        );
+        const actionsGap = Math.max(
+            minPadding,
+            baseActionGap * cardScale.value * spacing
+        );
+        const actionsGroupGap = Math.max(
+            minPadding,
+            baseActionGroupGap * cardScale.value * spacing
+        );
+        const actionsMargin = Math.max(
+            0,
+            baseActionMargin * cardScale.value * spacing
+        );
+        const checkboxMargin = Math.max(
+            0,
+            baseCheckboxMargin * cardScale.value * spacing
+        );
 
         return (count = 1, options = {}) => {
             const width = Math.max(containerWidth.value ?? 0, 0);
@@ -100,9 +165,7 @@ export function useFavoritesCardScaling(options = {}) {
             const columns = Math.max(1, Math.min(safeCount, requestedColumns));
             const forceStretch = Boolean(options?.forceStretch);
             const disableAutoStretch = Boolean(options?.disableAutoStretch);
-            const matchMaxColumnWidth = Boolean(
-                options?.matchMaxColumnWidth
-            );
+            const matchMaxColumnWidth = Boolean(options?.matchMaxColumnWidth);
             const shouldStretch =
                 !disableAutoStretch &&
                 (forceStretch || itemCount >= maxColumns);
@@ -133,7 +196,15 @@ export function useFavoritesCardScaling(options = {}) {
                 '--favorites-card-gap': `${Math.round(gap)}px`,
                 '--favorites-card-target-width': `${Math.round(cardWidth)}px`,
                 '--favorites-grid-columns': `${columns}`,
-                '--favorites-card-scale': `${cardScale.value.toFixed(2)}`
+                '--favorites-card-scale': `${cardScale.value.toFixed(2)}`,
+                '--favorites-card-padding-y': `${Math.round(paddingY)}px`,
+                '--favorites-card-padding-x': `${Math.round(paddingX)}px`,
+                '--favorites-card-content-gap': `${Math.round(contentGap)}px`,
+                '--favorites-card-action-gap': `${Math.round(actionsGap)}px`,
+                '--favorites-card-action-group-gap': `${Math.round(actionsGroupGap)}px`,
+                '--favorites-card-action-margin': `${Math.round(actionsMargin)}px`,
+                '--favorites-card-checkbox-margin': `${Math.round(checkboxMargin)}px`,
+                '--favorites-card-spacing-scale': `${cardSpacing.value.toFixed(2)}`
             };
         };
     });
@@ -184,34 +255,46 @@ export function useFavoritesCardScaling(options = {}) {
     });
 
     onBeforeMount(async () => {
-        if (!configKey) {
-            return;
-        }
-
         try {
-            const storedScale = await configRepository.getString(
-                configKey,
-                '1'
-            );
-            const parsedValue = parseFloat(storedScale);
-            if (!Number.isNaN(parsedValue)) {
-                cardScaleBase.value = clamp(
-                    parsedValue,
-                    slider.min,
-                    slider.max
+            if (configKey) {
+                const storedScale = await configRepository.getString(
+                    configKey,
+                    '1'
                 );
+                const parsedScale = parseFloat(storedScale);
+                if (!Number.isNaN(parsedScale)) {
+                    cardScaleBase.value = clamp(
+                        parsedScale,
+                        slider.min,
+                        slider.max
+                    );
+                }
+            }
+
+            if (spacingConfigKey) {
+                const storedSpacing = await configRepository.getString(
+                    spacingConfigKey,
+                    String(defaultSpacing)
+                );
+                const parsedSpacing = parseFloat(storedSpacing);
+                if (!Number.isNaN(parsedSpacing)) {
+                    cardSpacingBase.value = clamp(
+                        parsedSpacing,
+                        spacingSlider.min,
+                        spacingSlider.max
+                    );
+                }
             }
         } catch (error) {
-            console.error(
-                'Failed to load favorites card scale preference',
-                error
-            );
+            console.error('Failed to load favorites card preferences', error);
         }
     });
 
     return {
         cardScale,
+        cardSpacing,
         slider,
+        spacingSlider,
         containerRef,
         gridStyle
     };
diff --git a/src/views/FriendsLocations/FriendsLocations.vue b/src/views/FriendsLocations/FriendsLocations.vue
index 9d5418c8..35816af5 100644
--- a/src/views/FriendsLocations/FriendsLocations.vue
+++ b/src/views/FriendsLocations/FriendsLocations.vue
@@ -26,7 +26,7 @@
                     <div class="friend-view__settings-row">
                         <span class="friend-view__settings-label">Scale</span>
                         <div class="friend-view__scale-control">
-                            <span class="friend-view__scale-value">{{ cardScalePercentLabel }} &nbsp;</span>
+                            <span class="friend-view__scale-value">{{ cardScalePercentLabel }}&nbsp;</span>
                             <el-slider
                                 v-model="cardScale"
                                 class="friend-view__slider"
@@ -36,6 +36,19 @@
                                 :show-tooltip="false" />
                         </div>
                     </div>
+                    <div class="friend-view__settings-row">
+                        <span class="friend-view__settings-label">Spacing</span>
+                        <div class="friend-view__scale-control">
+                            <span class="friend-view__scale-value">{{ cardSpacingPercentLabel }}&nbsp;</span>
+                            <el-slider
+                                v-model="cardSpacing"
+                                class="friend-view__slider"
+                                :min="0.5"
+                                :max="1.5"
+                                :step="0.05"
+                                :show-tooltip="false" />
+                        </div>
+                    </div>
                 </el-popover>
             </div>
         </div>
@@ -66,7 +79,8 @@
                                 v-for="friend in group.friends"
                                 :key="friend.id ?? friend.userId ?? friend.displayName"
                                 :friend="friend"
-                                :card-scale="cardScale" />
+                                :card-scale="cardScale"
+                                :card-spacing="cardSpacing" />
                         </div>
                     </section>
                 </div>
@@ -96,6 +110,7 @@
                                 :key="friend.id ?? friend.userId ?? friend.displayName"
                                 :friend="friend"
                                 :card-scale="cardScale"
+                                :card-spacing="cardSpacing"
                                 :display-instance-info="false" />
                         </div>
                     </section>
@@ -111,7 +126,8 @@
                         v-for="entry in mergedOnlineEntries"
                         :key="entry.id ?? entry.friend.id ?? entry.friend.displayName"
                         :friend="entry.friend"
-                        :card-scale="cardScale" />
+                        :card-scale="cardScale"
+                        :card-spacing="cardSpacing" />
                 </div>
                 <div v-if="!mergedSameInstanceGroups.length && !mergedOnlineEntries.length" class="friend-view__empty">
                     No matching friends
@@ -123,7 +139,8 @@
                         v-for="entry in visibleFriends"
                         :key="entry.id ?? entry.friend.id ?? entry.friend.displayName"
                         :friend="entry.friend"
-                        :card-scale="cardScale" />
+                        :card-scale="cardScale"
+                        :card-spacing="cardSpacing" />
                 </div>
                 <div v-else class="friend-view__empty">No matching friends</div>
             </template>
@@ -175,6 +192,7 @@
     );
 
     const cardScaleBase = ref(1);
+    const cardSpacingBase = ref(1);
 
     const cardScale = computed({
         get: () => cardScaleBase.value,
@@ -184,7 +202,16 @@
         }
     });
 
+    const cardSpacing = computed({
+        get: () => cardSpacingBase.value,
+        set: (value) => {
+            cardSpacingBase.value = value;
+            configRepository.setString('VRCX_FriendLocationCardSpacing', value.toString());
+        }
+    });
+
     const cardScalePercentLabel = computed(() => `${Math.round(cardScale.value * 100)}%`);
+    const cardSpacingPercentLabel = computed(() => `${Math.round(cardSpacing.value * 100)}%`);
 
     const showSameInstanceBase = ref(false);
 
@@ -457,8 +484,9 @@
         const baseWidth = 220;
         const baseGap = 14;
         const scale = cardScale.value;
+        const spacing = cardSpacing.value;
         const minWidth = baseWidth * scale;
-        const gap = baseGap + (scale - 1) * 10;
+        const gap = Math.max(6, (baseGap + (scale - 1) * 10) * spacing);
 
         return (count = 1, options = {}) => {
             const containerWidth = Math.max(gridWidth.value ?? 0, 0);
@@ -493,7 +521,8 @@
                 '--friend-card-min-width': `${Math.round(minWidth)}px`,
                 '--friend-card-gap': `${Math.round(gap)}px`,
                 '--friend-card-target-width': `${Math.round(cardWidth)}px`,
-                '--friend-grid-columns': `${columns}`
+                '--friend-grid-columns': `${columns}`,
+                '--friend-card-spacing': `${spacing.toFixed(2)}`
             };
         };
     });
@@ -577,7 +606,7 @@
         }
     );
 
-    watch(cardScale, () => {
+    watch([cardScale, cardSpacing], () => {
         if (!settingsReady.value) {
             return;
         }
@@ -620,8 +649,9 @@
 
     async function loadInitialSettings() {
         try {
-            const [storedScale, storedShowSameInstance] = await Promise.all([
+            const [storedScale, storedSpacing, storedShowSameInstance] = await Promise.all([
                 configRepository.getString('VRCX_FriendLocationCardScale', '1'),
+                configRepository.getString('VRCX_FriendLocationCardSpacing', '1'),
                 configRepository.getBool('VRCX_FriendLocationShowSameInstance', null)
             ]);
 
@@ -630,6 +660,11 @@
                 cardScaleBase.value = parsedScale;
             }
 
+            const parsedSpacing = parseFloat(storedSpacing);
+            if (!Number.isNaN(parsedSpacing) && parsedSpacing > 0) {
+                cardSpacingBase.value = parsedSpacing;
+            }
+
             if (storedShowSameInstance !== null && storedShowSameInstance !== undefined) {
                 showSameInstanceBase.value = Boolean(storedShowSameInstance);
             }
diff --git a/src/views/FriendsLocations/components/FriendsLocationsCard.vue b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
index b71c182a..11b89dc1 100644
--- a/src/views/FriendsLocations/components/FriendsLocationsCard.vue
+++ b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
@@ -2,7 +2,7 @@
     <el-card
         class="friend-card"
         shadow="never"
-        :body-style="{ padding: `${16 * cardScale}px` }"
+        :body-style="{ padding: `${16 * cardScale * cardSpacing}px` }"
         :style="cardStyle"
         @click="showUserDialog(friend.id)">
         <div class="friend-card__header">
@@ -50,6 +50,10 @@
         displayInstanceInfo: {
             type: Boolean,
             default: true
+        },
+        cardSpacing: {
+            type: Number,
+            default: 1
         }
     });
 
@@ -57,6 +61,7 @@
 
     const cardStyle = computed(() => ({
         '--card-scale': props.cardScale,
+        '--card-spacing': props.cardSpacing,
         cursor: 'pointer'
     }));
 
@@ -85,9 +90,10 @@
 <style scoped lang="scss">
     .friend-card {
         --card-scale: 1;
+        --card-spacing: 1;
         position: relative;
         display: grid;
-        gap: calc(14px * var(--card-scale));
+        gap: calc(14px * var(--card-scale) * var(--card-spacing));
         border-radius: calc(8px * var(--card-scale));
         background: #fff;
         border: 1px solid var(--el-border-color);
@@ -95,7 +101,6 @@
         transition:
             box-shadow 0.2s ease,
             transform 0.2s ease;
-        width: 100%;
         max-width: var(--friend-card-target-width, 220px);
         min-width: var(--friend-card-min-width, 220px);
 
@@ -109,7 +114,7 @@
         display: grid;
         grid-template-columns: auto 1fr;
         align-items: flex-start;
-        gap: calc(12px * var(--card-scale));
+        gap: calc(12px * var(--card-scale) * var(--card-spacing));
     }
 
     .friend-card__avatar-wrapper {
@@ -126,8 +131,8 @@
         position: absolute;
         top: calc(8px * var(--card-scale));
         right: calc(8px * var(--card-scale));
-        width: calc(8px * var(--card-scale));
-        height: calc(8px * var(--card-scale));
+        inline-size: calc(8px * var(--card-scale));
+        block-size: calc(8px * var(--card-scale));
         border-radius: 999px;
         border: calc(2px * var(--card-scale)) solid #fff;
         box-shadow: 0 0 calc(4px * var(--card-scale)) rgba(15, 23, 42, 0.12);
@@ -160,7 +165,7 @@
 
     .friend-card__body {
         display: grid;
-        gap: calc(12px * var(--card-scale));
+        gap: calc(12px * var(--card-scale) * var(--card-spacing));
     }
 
     .friend-card__name {
@@ -174,7 +179,7 @@
     }
 
     .friend-card__signature {
-        margin-top: 6px;
+        margin-top: calc(6px * var(--card-spacing));
         font-size: calc(13px * var(--card-scale));
         color: rgba(31, 41, 55, 0.7);
         line-height: 1.4;
@@ -187,7 +192,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        height: calc(40px * var(--card-scale));
+        min-height: calc(40px * var(--card-scale));
         padding: calc(6px * var(--card-scale)) calc(10px * var(--card-scale));
         border-radius: calc(12px * var(--card-scale));
         background: rgba(148, 163, 184, 0.18);
@@ -213,6 +218,7 @@
         overflow: hidden;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 2;
+        line-clamp: 2;
         text-overflow: ellipsis;
     }