fix: visual issues (footer floating, table elements overflowing each others)

This commit is contained in:
Florian Sylvain committed 2026-10-29 16:57:39 +01:00
1 parent b39a41be88
commit 63c0aec444
3 files changed
+13 -7

No files matched your search

+4 -2
View File
@@ -51,8 +51,10 @@ const props = withDefaults(
const COMPACT_BODY = 'gap-0 px-4 pt-4 pb-22 sm:gap-0 sm:px-4 sm:pt-4 sm:pb-22 lg:p-6'
const DEFAULT_BODY = 'gap-0 px-4 pt-5 pb-22 sm:gap-0 sm:px-4 sm:pt-5 sm:pb-22 lg:p-8'
const COMPACT_STICKY_BODY = 'gap-0 px-4 pt-4 pb-0 sm:gap-0 sm:px-4 sm:pt-4 sm:pb-0 lg:p-6'
const STICKY_FOOTER_BODY = 'gap-0 px-4 pt-5 pb-0 sm:gap-0 sm:px-4 sm:pt-5 sm:pb-0 lg:p-8'
const COMPACT_STICKY_BODY =
'gap-0 px-4 pt-4 pb-0 sm:gap-0 sm:px-4 sm:pt-4 sm:pb-0 lg:px-6 lg:pt-6 lg:pb-0'
const STICKY_FOOTER_BODY =
'gap-0 px-4 pt-5 pb-0 sm:gap-0 sm:px-4 sm:pt-5 sm:pb-0 lg:px-8 lg:pt-8 lg:pb-0'
const bodyUi = computed(() => {
if (props.fullBleed) {
+7 -3
View File
@@ -123,7 +123,11 @@ function typeOf(typeKey?: string) {
</script>
<template>
<div :role="mobile ? undefined : 'grid'" :aria-label="t('Content permissions')">
<div
:role="mobile ? undefined : 'grid'"
:aria-label="t('Content permissions')"
class="overflow-x-auto"
>
<p class="sr-only" role="status" aria-live="polite" data-testid="grid-live-region">
{{ announcement }}
</p>
@@ -131,7 +135,7 @@ function typeOf(typeKey?: string) {
<template v-if="!mobile">
<div
role="row"
class="grid grid-cols-[minmax(7.5rem,1fr)_7.375rem_5.25rem_7.375rem_7.375rem_7.375rem] items-center gap-2 border-b border-default bg-elevated px-3 py-2 text-sm font-medium text-muted"
class="grid min-w-max grid-cols-[minmax(7.5rem,1fr)_11.5rem_5.25rem_11.5rem_11.5rem_11.5rem] items-center gap-2 border-b border-default bg-elevated px-3 py-2 text-sm font-medium text-muted"
>
<span role="columnheader">{{ t('Content type') }}</span>
<span v-for="column in columns" :key="column.action" role="columnheader">{{
@@ -143,7 +147,7 @@ function typeOf(typeKey?: string) {
:key="row.typeKey ?? 'all'"
role="row"
:data-testid="row.typeKey === undefined ? 'row-all' : `row-${row.typeKey}`"
class="grid grid-cols-[minmax(7.5rem,1fr)_7.375rem_5.25rem_7.375rem_7.375rem_7.375rem] items-center gap-2 border-b border-default px-3 py-2"
class="grid min-w-max grid-cols-[minmax(7.5rem,1fr)_11.5rem_5.25rem_11.5rem_11.5rem_11.5rem] items-center gap-2 border-b border-default px-3 py-2"
>
<span role="rowheader" class="flex flex-col gap-0.5">
<span class="font-medium text-highlighted">{{ row.name }}</span>
+2 -2
View File
@@ -93,7 +93,7 @@ onMounted(editor.load)
</script>
<template>
<DashboardShell compact-padding>
<DashboardShell compact-padding sticky-footer>
<template #breadcrumb>
<UBreadcrumb
:items="[
@@ -324,7 +324,7 @@ onMounted(editor.load)
</div>
</div>
<div v-if="footerVisible" class="sticky bottom-0 z-10 -mx-4 mt-4 flex flex-col">
<div v-if="footerVisible" class="sticky bottom-0 z-10 -mx-4 mt-4 flex flex-col lg:-mx-6">
<UButton
v-if="!isDesktop"
color="neutral"