From 2cce0fe6117e4b6c244aecd4327f02de89c2cddb Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Sat, 29 Nov 2025 14:23:48 -0800
Subject: [PATCH] style: make feedback button icon-only after mobile breakpoint
 (#7043)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

On mobile breakpoint, change the "Feedback" button to only show an icon,
preserving crucial space on the breadcrumb axis.

## Changes

| Before | After |
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
| <img width="732" height="1458" alt="Selection_2471"
src="https://github.com/user-attachments/assets/8491a755-5817-4021-a2bd-8dff09a8345f"
/> | <img width="732" height="1458" alt="Selection_2470"
src="https://github.com/user-attachments/assets/6229badb-46c4-4617-9984-5636ad4b803c"
/> |

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7043-style-make-feedback-button-icon-only-after-mobile-breakpoint-2ba6d73d365081489d9adc89eb5ec42b)
by [Unito](https://www.unito.io)
---
 src/components/topbar/ActionBarButtons.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/topbar/ActionBarButtons.vue b/src/components/topbar/ActionBarButtons.vue
index 81b5c42ad..c7bf82113 100644
--- a/src/components/topbar/ActionBarButtons.vue
+++ b/src/components/topbar/ActionBarButtons.vue
@@ -4,7 +4,7 @@
       v-for="(button, index) in actionBarButtonStore.buttons"
       :key="index"
       v-tooltip.bottom="button.tooltip"
-      :label="button.label"
+      :label="isMobile ? undefined : button.label"
       :aria-label="button.tooltip || button.label"
       :class="button.class"
       text
@@ -21,9 +21,13 @@
 </template>
 
 <script lang="ts" setup>
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import Button from 'primevue/button'
 
 import { useActionBarButtonStore } from '@/stores/actionBarButtonStore'
 
 const actionBarButtonStore = useActionBarButtonStore()
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const isMobile = breakpoints.smaller('sm')
 </script>