From 06dbe14d765f284ee4de22ea716f74983e928d4b Mon Sep 17 00:00:00 2001
From: Jokin <jokingam@tuta.io>
Date: Sat, 11 Jul 2026 20:30:24 +0200
Subject: [PATCH] Toolbar buttons show text labels when the panel is wide

Container query on the panel (Tailwind v4 @container): Copy, Edit, Rename and
Delete grow labels at >=30rem panel width; New folder, New file and
Permissions stay icon-only (self-explanatory icons). Tooltips unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 ui/src/app/file-panel/file-panel.html | 15 ++++++++++-----
 ui/src/app/file-panel/file-panel.ts   |  2 +-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/ui/src/app/file-panel/file-panel.html b/ui/src/app/file-panel/file-panel.html
index c831812..a985a5d 100644
--- a/ui/src/app/file-panel/file-panel.html
+++ b/ui/src/app/file-panel/file-panel.html
@@ -29,27 +29,31 @@
 
   <div class="flex-1"></div>
 
-  <!-- panel actions: act on THIS panel -->
+  <!-- panel actions: act on THIS panel. Frequent/destructive verbs grow text
+       labels when the panel is wide enough (container query). -->
   <button
     (click)="copyToOther()"
     [title]="side() === 'left' ? 'Copy to right panel (F5)' : 'Copy to left panel (F5)'"
-    class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-primary"
+    class="flex h-6 shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-primary"
   >
     <ng-icon [name]="copyIcon()" size="0.95rem" />
+    <span class="ml-1 hidden text-[11px] @[30rem]:inline">Copy</span>
   </button>
   <button
     (click)="run('edit')"
     title="Edit file (F4)"
-    class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+    class="flex h-6 shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-foreground"
   >
     <ng-icon name="mynaFileText" size="0.9rem" />
+    <span class="ml-1 hidden text-[11px] @[30rem]:inline">Edit</span>
   </button>
   <button
     (click)="run('rename')"
     title="Rename (F2)"
-    class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+    class="flex h-6 shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-foreground"
   >
     <ng-icon name="mynaEdit" size="0.9rem" />
+    <span class="ml-1 hidden text-[11px] @[30rem]:inline">Rename</span>
   </button>
   <button
     (click)="run('mkdir')"
@@ -75,9 +79,10 @@
   <button
     (click)="run('delete')"
     title="Delete (F8 / Del)"
-    class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-destructive"
+    class="flex h-6 shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-destructive"
   >
     <ng-icon name="mynaTrash" size="0.9rem" />
+    <span class="ml-1 hidden text-[11px] @[30rem]:inline">Delete</span>
   </button>
 
   @if (menuOpen()) {
diff --git a/ui/src/app/file-panel/file-panel.ts b/ui/src/app/file-panel/file-panel.ts
index 5ae4b99..3cd2927 100644
--- a/ui/src/app/file-panel/file-panel.ts
+++ b/ui/src/app/file-panel/file-panel.ts
@@ -21,7 +21,7 @@ import { TransfersService } from '../transfers.service';
   selector: 'app-file-panel',
   imports: [NgIcon],
   templateUrl: './file-panel.html',
-  host: { class: 'flex min-w-0 flex-1 flex-col overflow-hidden' },
+  host: { class: '@container flex min-w-0 flex-1 flex-col overflow-hidden' },
 })
 export class FilePanel {
   readonly side = input.required<Side>();