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

web/src/components/DashboardShell.vue

@@ -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 COMPACT_STICKY_BODY =
-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'
+	'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) {

web/src/components/PermissionGrid.vue

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

web/src/views/RoleEditorView.vue

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