From fa57a9c177721a36cb83352e3afe62231e189f09 Mon Sep 17 00:00:00 2001 From: Juan Carlos Diaz Date: Sat, 11 Apr 2026 22:36:35 +0200 Subject: [PATCH 1/3] fix(modal): resolve mobile viewport issues with height and centering Replace h-screen with h-full on the modal root to fix mobile browser viewport issues. On mobile browsers, 100vh includes the area behind the toolbar/address bar, causing the modal close button to be cut off and the modal to appear misaligned. Also add flex flex-col to content.base so the modal content properly fills the available space and works correctly with the position prop for vertical centering. Fixes #1083 Co-Authored-By: Claude Opus 4.6 --- packages/ui/src/components/Modal/theme.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/components/Modal/theme.ts b/packages/ui/src/components/Modal/theme.ts index 87c180bd7..e740df013 100644 --- a/packages/ui/src/components/Modal/theme.ts +++ b/packages/ui/src/components/Modal/theme.ts @@ -3,7 +3,7 @@ import type { ModalTheme } from "./Modal"; export const modalTheme = createTheme({ root: { - base: "fixed inset-x-0 top-0 z-50 h-screen overflow-y-auto overflow-x-hidden md:inset-0 md:h-full", + base: "fixed inset-x-0 top-0 z-50 h-full overflow-y-auto overflow-x-hidden md:inset-0 md:h-full", show: { on: "flex bg-gray-900/50 dark:bg-gray-900/80", off: "hidden", @@ -33,7 +33,7 @@ export const modalTheme = createTheme({ }, }, content: { - base: "relative h-full w-full p-4 md:h-auto", + base: "relative h-full w-full p-4 md:h-auto flex flex-col", inner: "relative flex max-h-[90dvh] flex-col rounded-lg bg-white shadow dark:bg-gray-700", }, body: { From 85389d54e59d94090824d6c89be925b789963695 Mon Sep 17 00:00:00 2001 From: seojcarlos Date: Sun, 12 Apr 2026 09:59:57 +0200 Subject: [PATCH 2/3] chore: add changeset for modal mobile viewport fix --- .changeset/modal-mobile-viewport.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .changeset/modal-mobile-viewport.md diff --git a/.changeset/modal-mobile-viewport.md b/.changeset/modal-mobile-viewport.md new file mode 100644 index 000000000..a7bf143c0 --- /dev/null +++ b/.changeset/modal-mobile-viewport.md @@ -0,0 +1,8 @@ +--- +"flowbite-react": patch +--- + +fix(modal): resolve mobile viewport height and centering issues + +Replace `h-screen` with `h-full` and add `flex flex-col` to modal +content for proper layout on mobile viewports. From feceebe5d36a0910e2d05c8c9989b7237dd94315 Mon Sep 17 00:00:00 2001 From: seojcarlos Date: Sun, 12 Apr 2026 10:09:51 +0200 Subject: [PATCH 3/3] style: fix prettier formatting --- packages/ui/src/components/Modal/theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/Modal/theme.ts b/packages/ui/src/components/Modal/theme.ts index e740df013..3ff7f1098 100644 --- a/packages/ui/src/components/Modal/theme.ts +++ b/packages/ui/src/components/Modal/theme.ts @@ -33,7 +33,7 @@ export const modalTheme = createTheme({ }, }, content: { - base: "relative h-full w-full p-4 md:h-auto flex flex-col", + base: "relative flex h-full w-full flex-col p-4 md:h-auto", inner: "relative flex max-h-[90dvh] flex-col rounded-lg bg-white shadow dark:bg-gray-700", }, body: {