style: make feedback button icon-only after mobile breakpoint (#7043)

## 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)
This commit is contained in:
Christian Byrne
2025-11-29 14:23:48 -08:00
committed by GitHub
parent b9cb335255
commit 2cce0fe611

View File

@@ -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>