added option to disable aspect ratio for profiles

src/components/settings_modal/tabs/appearance_tab.vue

@@ -263,6 +263,11 @@
             {{ $t('settings.hide_wallpaper') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="compactProfiles">
+            {{ $t('settings.compact_profiles') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
   </div>

src/components/user_card/user_card.js

@@ -114,6 +114,12 @@ export default {
       type: Boolean,
       default: false,
     },
+    // Disable forced 3:1 aspect ratio
+    compact: {
+      required: false,
+      type: Boolean,
+      default: false,
+    }
   },
   components: {
     DialogModal,

src/components/user_card/user_card.scss

@@ -165,12 +165,15 @@
 
   .user-identity {
     position: relative;
-    aspect-ratio: 3;
     min-height: 6em;
     display: flex;
     align-items: flex-end;
     container: user-card / inline-size;
 
+    &:not(.-compact) {
+      aspect-ratio: 3;
+    }
+
     > * {
       min-width: 0;
     }

src/components/user_card/user_card.vue

@@ -2,7 +2,10 @@
   <div class="user-card">
     <div class="user-card-inner">
       <div class="user-info">
-        <div class="user-identity">
+        <div
+          class="user-identity"
+          :class="{ '-compact': compact }"
+        >
           <div class="header-overlay">
             <div class="banner-image">
               <img

src/components/user_popover/user_popover.vue

@@ -12,6 +12,7 @@
     <template #content="{close}">
       <UserCard
         class="user-popover"
+        :compact="true"
         :show-close="true"
         :show-expand="true"
         :user-id="userId"
@@ -37,7 +38,6 @@
   }
 
   .user-identity {
-    aspect-ratio: unset;
     min-width: calc(min(30em, 98vw));
   }
 

src/components/user_profile/user_profile.js

@@ -1,4 +1,5 @@
 import get from 'lodash/get'
+import { mapState } from 'pinia'
 
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
@@ -9,6 +10,7 @@ import List from '../list/list.vue'
 import Timeline from '../timeline/timeline.vue'
 import UserCard from '../user_card/user_card.vue'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 
@@ -94,6 +96,9 @@ const UserProfile = {
           !this.user.hide_favorites)
       )
     },
+    compactProfiles() {
+      return useMergedConfigStore().mergedConfig.compactProfiles
+    },
   },
   methods: {
     setFooterRef(el) {

src/components/user_profile/user_profile.vue

@@ -9,6 +9,7 @@
           :user-id="userId"
           :switcher="true"
           :selected="timeline.viewing"
+          :compact="compactProfiles"
           avatar-action="zoom"
           :has-note-editor="true"
         />

src/i18n/en.json

@@ -1141,7 +1141,8 @@
     "hard_reset_value_tooltip": "Remove setting from storage, forcing use of default value",
     "cache": "Cache",
     "clear_asset_cache": "Clear asset cache",
-    "clear_emoji_cache": "Clear emoji cache"
+    "clear_emoji_cache": "Clear emoji cache",
+    "compact_profiles": "Reduce profile height on user pages"
   },
   "admin_dash": {
     "window_title": "Administration",

src/modules/default_config_state.js

@@ -542,6 +542,10 @@ export const INSTANCE_DEFAULT_CONFIG_DEFINITIONS = {
     required: true,
     default: 'none',
   },
+  compactProfiles: {
+    description: 'Reduce profile height on user pages',
+    default: false,
+  },
 }
 export const INSTANCE_DEFAULT_CONFIG = convertDefinitions(
   INSTANCE_DEFAULT_CONFIG_DEFINITIONS,