mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-02 22:37:32 +00:00
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user