src/components/layout/ProfileSheetContent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { Check, Copy, Home, LogIn, LogOut, Pencil, Zap } from 'lucide-vue-next'
+import { Check, Copy, Home, LogIn, LogOut, Settings, Zap } from 'lucide-vue-next'
 import { nip19 } from 'nostr-tools'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
@@ -104,7 +104,19 @@ async function onLogout() {
 
 <template>
   <SheetHeader>
-    <SheetTitle>{{ t('common.nav.profile') }}</SheetTitle>
+    <div class="flex items-center justify-between gap-2">
+      <SheetTitle>{{ t('common.nav.profile') }}</SheetTitle>
+      <Button
+        v-if="isAuthenticated"
+        variant="ghost"
+        size="icon"
+        class="h-8 w-8 shrink-0"
+        :aria-label="t('common.nav.editProfile', 'Edit profile')"
+        @click="editProfileOpen = true"
+      >
+        <Settings class="h-4 w-4" />
+      </Button>
+    </div>
     <SheetDescription v-if="isAuthenticated">
       {{ t('common.nav.profileDescription') }}
     </SheetDescription>
@@ -113,8 +125,8 @@ async function onLogout() {
     </SheetDescription>
   </SheetHeader>
 
-  <!-- Identity card (logged in) — summary with an inline edit (pencil)
+  <!-- Identity card (logged in) — read-only summary. Editing happens
-       button that opens the profile form. -->
+       through the gear button next to the title. -->
   <div v-if="isAuthenticated" class="mt-4 rounded-lg border bg-muted/30 p-3 space-y-4">
     <div class="flex items-center gap-3 min-w-0">
       <Avatar class="h-12 w-12 shrink-0">
@@ -127,15 +139,6 @@ async function onLogout() {
           @{{ user.username }}
         </p>
       </div>
-      <Button
-        variant="ghost"
-        size="icon"
-        class="h-8 w-8 shrink-0 self-start text-muted-foreground"
-        :aria-label="t('common.nav.editProfile', 'Edit profile')"
-        @click="editProfileOpen = true"
-      >
-        <Pencil class="h-4 w-4" />
-      </Button>
     </div>
 
     <!-- Identifier rows: full-width value with a corner-offset "legend"
@@ -243,8 +246,8 @@ async function onLogout() {
     </AlertDialog>
   </div>
 
-  <!-- Edit-profile popup (pencil button in the identity card) — the full
+  <!-- Edit-profile popup (gear icon) — the full form lives here so the
-       form lives here so the sheet stays scannable. -->
+       sheet stays scannable. -->
   <Dialog v-model:open="editProfileOpen">
     <DialogContent class="max-w-md max-h-[90vh] overflow-y-auto overflow-x-hidden">
       <DialogHeader>

src/modules/events/components/TemporalFilterBar.vue

@@ -26,16 +26,13 @@ const options: { value: TemporalFilter; labelKey: string }[] = [
 </script>
 
 <template>
-  <!-- pb-1 pr-1 keep the theme's offset drop-shadow (neobrut casts a hard 4px
+  <div class="flex gap-2 overflow-x-auto" style="-ms-overflow-style: none; scrollbar-width: none;">
-       shadow down and to the right) from being clipped at the scroll box's
-       bottom/right edges (overflow-x-auto forces overflow-y to auto). -->
-  <div class="flex gap-2 overflow-x-auto pb-1 pr-1" style="-ms-overflow-style: none; scrollbar-width: none;">
     <Button
       v-for="option in options"
       :key="option.value"
       :variant="props.modelValue === option.value ? 'default' : 'outline'"
       size="sm"
-      class="text-xs shrink-0"
+      class="rounded-full text-xs shrink-0"
       @click="emit('update:modelValue', option.value)"
     >
       {{ t(option.labelKey) }}
@@ -48,7 +45,7 @@ const options: { value: TemporalFilter; labelKey: string }[] = [
     <Button
       :variant="props.showPast ? 'default' : 'outline'"
       size="sm"
-      class="text-xs shrink-0 gap-1.5"
+      class="rounded-full text-xs shrink-0 gap-1.5"
       @click="emit('toggle-past')"
     >
       <History class="w-3 h-3" />