added setting for user info compactness

src/components/settings_modal/tabs/general_tab.vue

@@ -164,6 +164,11 @@
             {{ $t('settings.center_align_bio') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="compactUserInfo">
+            {{ $t('settings.compact_user_info') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting path="stopGifs">
             {{ $t('settings.stop_gifs') }}

src/components/user_card/user_card.js

@@ -117,6 +117,9 @@ export default {
     shouldConfirmMute () {
       return this.mergedConfig.modalOnMute
     },
+    compactUserInfo () {
+      return this.$store.getters.mergedConfig.compactUserInfo
+    },
     ...mapGetters(['mergedConfig'])
   },
   components: {

src/components/user_card/user_card.scss

@@ -22,8 +22,10 @@
   }
 
   .user-buttons {
+    grid-area: edit;
     display: flex;
     padding: .5em 0 .5em 0;
+    justify-self: end;
   }
 
   .panel-body {
@@ -105,9 +107,12 @@
 
   .container {
     padding: 16px 0 6px;
-    display: flex;
-    align-items: flex-start;
-    max-height: 56px;
+    display: grid;
+    grid-template-areas:
+      "pfp summary edit"
+      "stats stats stats";
+    grid-template-columns: auto 1fr auto;
+    align-items: start;
 
     .Avatar {
       --_avatarShadowBox: var(--avatarShadow);
@@ -122,6 +127,7 @@
   }
 
   &-avatar-link {
+    grid-area: pfp;
     position: relative;
     cursor: pointer;
 
@@ -164,6 +170,7 @@
   }
 
   .user-summary {
+    grid-area: summary;
     display: grid;
     grid-template-areas:
       "name name name name name"
@@ -217,18 +224,17 @@
   }
 
   .user-counts {
+    grid-area: stats;
     display: flex;
     line-height:16px;
-    padding: 0 1.5em 0 1.5em;
-    margin: 0 auto;
+    padding-top: 0.5em;
     text-align: center;
-    justify-content: space-between;
+    justify-content: space-around;
     color: $fallback--lightText;
     color: var(--lightText, $fallback--lightText);
     align-self: center;
 
     .user-count {
-      flex: 1 0 auto;
       padding: .5em 0 .5em 0;
       margin: 0 .5em;
 
@@ -315,6 +321,17 @@
       margin: 0;
     }
   }
+
+  &.-compact {
+    .container {
+      grid-template-areas: "pfp summary stats edit";
+      grid-template-columns: auto auto 1fr auto;
+    }
+    .user-counts {
+      padding-top: 0;
+      justify-content: space-evenly;
+    }
+  }
 }
 
 .sidebar .edit-profile-button {

src/components/user_card/user_card.vue

@@ -9,7 +9,10 @@
       class="background-image"
     />
     <div class="panel-heading -flexible-height">
-      <div class="user-info">
+      <div
+        class="user-info"
+        :class="{ '-compact': this.compactUserInfo }"
+      >
         <div class="container">
           <a
             v-if="allowZoomingAvatar"

src/i18n/de.json

@@ -497,6 +497,7 @@
         "checkboxRadius": "Auswahlfelder",
         "collapse_subject": "Beiträge mit Inhaltswarnungen einklappen",
         "columns": "Spalten",
+        "compact_user_info": "Kompakte Benutzerinfos",
         "composing": "Verfassen",
         "confirm_dialogs": "Bestätigung erforderlich für:",
         "confirm_dialogs_approve_follow": "Annehmen einer Followanfrage",

src/i18n/en.json

@@ -503,6 +503,7 @@
         "checkboxRadius": "Checkboxes",
         "collapse_subject": "Collapse posts with content warnings",
         "columns": "Columns",
+        "compact_user_info": "Compact user info",
         "composing": "Composing",
         "confirm_dialogs": "Require confirmation for:",
         "confirm_dialogs_approve_follow": "Accepting a follow request",

src/modules/config.js

@@ -57,6 +57,7 @@ export const defaultState = {
   pauseOnUnfocused: true,
   displayPageBackgrounds: true,
   centerAlignBio: false,
+  compactUserInfo: true,
   stopGifs: undefined,
   replyVisibility: 'all',
   thirdColumnMode: 'notifications',