aiolabs/webapp
8
0
Fork 0
Code Issues 65 Pull requests Projects Releases Packages Wiki Activity Actions

Move refresh to compact icon button in header row

Browse source 
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>
This commit is contained in:
Padreug 2026-04-20 08:00:01 +02:00
commit 63c20e39ae
1 changed files with 8 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/modules/activities/views/ActivitiesPage.vue
View file

@ -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">
<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>
<div class="flex gap-2 sm:flex-shrink-0">
<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>