From 63c20e39aefb3cdb6cb60648d712e8c081874da1 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Mon, 20 Apr 2026 08:00:01 +0200
Subject: [PATCH] Move refresh to compact icon button in header row

Refresh is now a ghost icon-only button next to the title instead of
a full-width outlined button. Create button text hidden on mobile
(icon-only). Saves vertical space on small screens.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../activities/views/ActivitiesPage.vue       | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/modules/activities/views/ActivitiesPage.vue b/src/modules/activities/views/ActivitiesPage.vue
index f5f41ca..77e3bbe 100644
--- a/src/modules/activities/views/ActivitiesPage.vue
+++ b/src/modules/activities/views/ActivitiesPage.vue
@@ -60,24 +60,21 @@ function handleRefresh() {
 <template>
   <div class="container mx-auto py-6 px-4">
     <!-- Page header -->
-    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6">
-      <div class="space-y-1">
-        <h1 class="text-2xl sm:text-3xl font-bold text-foreground">
-          {{ t('activities.title') }}
-        </h1>
-      </div>
-      <div class="flex gap-2 sm:flex-shrink-0">
+    <div class="flex items-center justify-between mb-4">
+      <h1 class="text-2xl sm:text-3xl font-bold text-foreground">
+        {{ t('activities.title') }}
+      </h1>
+      <div class="flex items-center gap-2">
         <Button
           v-if="isAuthenticated"
           size="sm"
           @click="showCreateDialog = true"
         >
           <Plus class="w-4 h-4 mr-1.5" />
-          {{ t('activities.createNew') }}
+          <span class="hidden sm:inline">{{ t('activities.createNew') }}</span>
         </Button>
-        <Button variant="outline" size="sm" @click="handleRefresh" :disabled="isLoading">
-          <RefreshCw class="w-4 h-4 mr-1.5" :class="{ 'animate-spin': isLoading }" />
-          Refresh
+        <Button variant="ghost" size="icon" class="h-8 w-8" @click="handleRefresh" :disabled="isLoading">
+          <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': isLoading }" />
         </Button>
       </div>
     </div>