From a4de299c587a279d54d6a30eae7646600bd45932 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 7 Aug 2025 17:25:04 +0300
Subject: [PATCH] improve styles for user_panel

---
 src/components/user_card/user_card.vue   | 126 +++++++++++------------
 src/components/user_panel/user_panel.vue |   8 +-
 2 files changed, 69 insertions(+), 65 deletions(-)

diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index e0643a111..af3c56186 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -227,74 +227,72 @@
           </div>
         </div>
         <div
-          v-if="loggedIn"
+          v-if="loggedIn && isOtherUser"
           class="user-interactions"
         >
-          <template v-if="isOtherUser">
-            <div class="btn-group">
-              <FollowButton
-                :relationship="relationship"
-                :user="user"
-              />
-              <template v-if="relationship.following">
-                <ProgressButton
-                  v-if="!relationship.notifying"
-                  class="btn button-default"
-                  :click="subscribeUser"
-                  :title="$t('user_card.subscribe')"
-                >
-                  <FAIcon icon="bell" />
-                </ProgressButton>
-                <ProgressButton
-                  v-else
-                  class="btn button-default toggled"
-                  :click="unsubscribeUser"
-                  :title="$t('user_card.unsubscribe')"
-                >
-                  <FALayers>
-                    <FAIcon
-                      icon="rss"
-                      transform="left-5 shrink-6 up-3 rotate-20"
-                      flip="horizontal"
-                    />
-                    <FAIcon
-                      icon="rss"
-                      transform="right-5 shrink-6 up-3 rotate-20"
-                    />
-                    <FAIcon icon="bell" />
-                  </FALayers>
-                </ProgressButton>
-              </template>
-            </div>
-            <button
-              v-if="relationship.muting"
-              class="btn button-default btn-mute toggled"
-              :disabled="user.deactivated"
-              @click="unmuteUser"
-            >
-              {{ $t('user_card.muted') }}
-            </button>
-            <button
-              v-else
-              class="btn button-default btn-mute"
-              :disabled="user.deactivated"
-              @click="muteUser"
-            >
-              {{ $t('user_card.mute') }}
-            </button>
-            <button
-              class="btn button-default btn-mention"
-              :disabled="user.deactivated"
-              @click="mentionUser"
-            >
-              {{ $t('user_card.mention') }}
-            </button>
-            <ModerationTools
-              v-if="showModerationMenu"
-              class="moderation-menu"
+          <div class="btn-group">
+            <FollowButton
+              :relationship="relationship"
               :user="user"
             />
-          </template>
+            <template v-if="relationship.following">
+              <ProgressButton
+                v-if="!relationship.notifying"
+                class="btn button-default"
+                :click="subscribeUser"
+                :title="$t('user_card.subscribe')"
+              >
+                <FAIcon icon="bell" />
+              </ProgressButton>
+              <ProgressButton
+                v-else
+                class="btn button-default toggled"
+                :click="unsubscribeUser"
+                :title="$t('user_card.unsubscribe')"
+              >
+                <FALayers>
+                  <FAIcon
+                    icon="rss"
+                    transform="left-5 shrink-6 up-3 rotate-20"
+                    flip="horizontal"
+                  />
+                  <FAIcon
+                    icon="rss"
+                    transform="right-5 shrink-6 up-3 rotate-20"
+                  />
+                  <FAIcon icon="bell" />
+                </FALayers>
+              </ProgressButton>
+            </template>
+          </div>
+          <button
+            v-if="relationship.muting"
+            class="btn button-default btn-mute toggled"
+            :disabled="user.deactivated"
+            @click="unmuteUser"
+          >
+            {{ $t('user_card.muted') }}
+          </button>
+          <button
+            v-else
+            class="btn button-default btn-mute"
+            :disabled="user.deactivated"
+            @click="muteUser"
+          >
+            {{ $t('user_card.mute') }}
+          </button>
+          <button
+            class="btn button-default btn-mention"
+            :disabled="user.deactivated"
+            @click="mentionUser"
+          >
+            {{ $t('user_card.mention') }}
+          </button>
+          <ModerationTools
+            v-if="showModerationMenu"
+            class="moderation-menu"
+            :user="user"
+          />
         </div>
         <div
           v-if="!loggedIn && user.is_local"
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 14741fe00..3f6922c31 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -28,7 +28,7 @@
   }
 
   .user-info {
-    margin: 0.6em;
+    margin: 0.6em 0.6em 0;
 
     .Avatar {
       width: 5em;
@@ -38,6 +38,12 @@
     }
   }
 
+  .post-status-form {
+    form {
+      margin-top: 0;
+    }
+  }
+
   .signed-in {
     z-index: 10;
   }