MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(modal): repair layout regression

This commit is contained in:
upsiflu 2024-12-25 20:40:41 +01:00
parent b9f405e52d
commit e3529d8753
1 changed files with 4 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
front/src/ui/modals/Shortcuts.vue
View File

@ -119,11 +119,10 @@ const player = computed(() => [
:title="t('components.ShortcutsModal.header.modal')" :title="t('components.ShortcutsModal.header.modal')"
v-model="isOpen" v-model="isOpen"
> >
<Layout columns style="column-gap: 64px; column-rule: none;"> <Layout grid="auto / repeat(auto-fit, minmax(min-content, max(calc(50% - 16px), 367px)))">
<div <div
v-for="section in player" v-for="section in player"
:key="section.title" :key="section.title"
style="break-inside: avoid;"
> >
<h3 style="margin-top: 0px;">{{ section.title }}</h3> <h3 style="margin-top: 0px;">{{ section.title }}</h3>
<layout stack no-gap> <layout stack no-gap>
@ -134,7 +133,7 @@ const player = computed(() => [
<layout flex> <layout flex>
<span :class="$style.description" style="align-self: center;">{{ shortcut.summary }}</span> <span :class="$style.description" style="align-self: center;">{{ shortcut.summary }}</span>
<Spacer grow /> <Spacer grow />
<Button style="pointer-events:none;" width="auto">{{ shortcut.key }}</Button> <Button style="pointer-events:none;" min-content>{{ shortcut.key }}</Button>
</layout> </layout>
<hr /> <hr />
</template> </template>
@ -144,7 +143,7 @@ const player = computed(() => [
v-for="section in general" v-for="section in general"
:key="section.title" :key="section.title"
> >
<h3>{{ section.title }}</h3> <h3 style="margin-top: 0px;">{{ section.title }}</h3>
<layout stack no-gap> <layout stack no-gap>
<div <div
v-for="shortcut in section.shortcuts" v-for="shortcut in section.shortcuts"
@ -153,7 +152,7 @@ const player = computed(() => [
<layout flex> <layout flex>
<span :class="$style.description" style="align-self: center;">{{ shortcut.summary }}</span> <span :class="$style.description" style="align-self: center;">{{ shortcut.summary }}</span>
<Spacer grow /> <Spacer grow />
<Button style="pointer-events:none;" width="auto">{{ shortcut.key }}</Button> <Button style="pointer-events:none;" min-content>{{ shortcut.key }}</Button>
</layout> </layout>
<hr /> <hr />
</div> </div>