From 5ec37608f1c8b928bcd769a1ed743118616daf83 Mon Sep 17 00:00:00 2001
From: Camille Moussu <66134347+Eriikah@users.noreply.github.com>
Date: Wed, 25 Feb 2026 17:40:47 +0100
Subject: [PATCH] [#575] fixed broken paddings (#582)

---
 src/components/Calendar/Calendar.styl      | 16 +++++++++++++++-
 src/components/Calendar/Calendar.tsx       |  6 ++++--
 src/components/Calendar/CalendarLayout.tsx |  2 +-
 src/components/Dialog/ResponsiveDialog.tsx | 11 ++++++++---
 src/components/Menubar/Menubar.styl        |  2 +-
 src/features/Settings/SettingsPage.styl    |  3 +++
 src/features/Settings/SettingsPage.tsx     |  6 ++++--
 7 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/components/Calendar/Calendar.styl b/src/components/Calendar/Calendar.styl
index 238a4fe..112801f 100644
--- a/src/components/Calendar/Calendar.styl
+++ b/src/components/Calendar/Calendar.styl
@@ -7,7 +7,11 @@
 .main-layout
   display flex
   height calc(100vh - 70px)
-  
+
+.main-layout.isInIframe
+  margin-top 8px
+  height calc(100vh - 8px)
+
 .main-layout.calendar-layout
   background-color #fff
   flex-direction row
@@ -17,6 +21,16 @@
   height 100%
   overflow hidden
 
+.main-layout.isInIframe .calendar
+  display flex
+  flex-direction column
+  height 100%
+  overflow hidden
+
+.main-layout.isInIframe .fc
+  flex 1
+  min-height 0
+
 .calendarListHeader
   padding-top 10px
   display flex
diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
index c403aa6..aab4753 100644
--- a/src/components/Calendar/Calendar.tsx
+++ b/src/components/Calendar/Calendar.tsx
@@ -599,7 +599,9 @@ export default function CalendarApp({
   const { t, lang } = useI18n();
 
   return (
-    <main className="main-layout calendar-layout">
+    <main
+      className={`main-layout calendar-layout ${menubarProps?.isIframe ? " isInIframe" : ""}`}
+    >
       <Box
         className="sidebar"
         sx={{
@@ -616,7 +618,7 @@ export default function CalendarApp({
             top: 0,
             zIndex: 10,
             backgroundColor: "#fff",
-            paddingTop: 3,
+            paddingTop: menubarProps?.isIframe ? "10px" : 3,
           }}
         >
           <Button
diff --git a/src/components/Calendar/CalendarLayout.tsx b/src/components/Calendar/CalendarLayout.tsx
index 0f2ffe1..3ec4b41 100644
--- a/src/components/Calendar/CalendarLayout.tsx
+++ b/src/components/Calendar/CalendarLayout.tsx
@@ -86,7 +86,7 @@ export default function CalendarLayout() {
           menubarProps={menubarProps}
         />
       )}
-      {view === "settings" && <SettingsPage />}
+      {view === "settings" && <SettingsPage isInIframe={isInIframe} />}
       <ErrorSnackbar error={error} type="calendar" />
     </div>
   );
diff --git a/src/components/Dialog/ResponsiveDialog.tsx b/src/components/Dialog/ResponsiveDialog.tsx
index 198dc2d..8da49aa 100644
--- a/src/components/Dialog/ResponsiveDialog.tsx
+++ b/src/components/Dialog/ResponsiveDialog.tsx
@@ -15,7 +15,8 @@ import {
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import CloseIcon from "@mui/icons-material/Close";
 import OpenInFullIcon from "@mui/icons-material/OpenInFull";
-import React, { ReactNode } from "react";
+import CozyBridge from "cozy-external-bridge";
+import React, { ReactNode, useMemo } from "react";
 
 /**
  * ResponsiveDialog - A reusable dialog component that can switch between normal and expanded modes
@@ -114,6 +115,7 @@ function ResponsiveDialog({
   sx,
   ...otherDialogProps
 }: ResponsiveDialogProps) {
+  const isInIframe = useMemo(() => new CozyBridge().isInIframe(), []);
   const baseSx: SxProps<Theme> = {
     "& .MuiBackdrop-root": {
       backgroundColor: "rgba(0, 0, 0, 0.1)",
@@ -124,8 +126,11 @@ function ResponsiveDialog({
     "& .MuiDialog-paper": {
       maxWidth: isExpanded ? "100%" : normalMaxWidth,
       width: "100%",
-      height: isExpanded ? `calc(100vh - ${headerHeight})` : undefined,
-      margin: isExpanded ? `${headerHeight} 0 0 0` : "32px",
+      height: isExpanded
+        ? `calc(100vh - ${isInIframe ? "0px" : headerHeight})`
+        : undefined,
+      maxHeight: isExpanded && isInIframe ? "100%" : undefined,
+      margin: isExpanded ? `${isInIframe ? 0 : headerHeight} 0 0 0` : "32px",
       boxShadow: isExpanded ? "none !important" : undefined,
       transition: isExpanded ? "none !important" : undefined,
       zIndex: isExpanded ? 1200 : 1300,
diff --git a/src/components/Menubar/Menubar.styl b/src/components/Menubar/Menubar.styl
index 402d18b..11c5305 100644
--- a/src/components/Menubar/Menubar.styl
+++ b/src/components/Menubar/Menubar.styl
@@ -37,7 +37,7 @@
   align-items center
   padding 0.5rem
   width 100%
-  z-index 1300
+  z-index 1100
   height 60px
   background-color #fff
 
diff --git a/src/features/Settings/SettingsPage.styl b/src/features/Settings/SettingsPage.styl
index 28673ea..e2f15cd 100644
--- a/src/features/Settings/SettingsPage.styl
+++ b/src/features/Settings/SettingsPage.styl
@@ -4,6 +4,9 @@
   height calc(100vh - 70px)
   padding 0 10px 10px 0;
 
+.main-layout.settings-layout.isInIframe
+  height 100vh
+
 .settings-sidebar
   width 350px
   height 100%
diff --git a/src/features/Settings/SettingsPage.tsx b/src/features/Settings/SettingsPage.tsx
index a5dc527..71f5898 100644
--- a/src/features/Settings/SettingsPage.tsx
+++ b/src/features/Settings/SettingsPage.tsx
@@ -44,7 +44,7 @@ import {
 type SidebarNavItem = "settings" | "sync";
 type SettingsSubTab = "settings" | "notifications";
 
-export default function SettingsPage() {
+export default function SettingsPage({ isInIframe }: { isInIframe?: boolean }) {
   const dispatch = useAppDispatch();
   const { t } = useI18n();
   const previousConfig = useAppSelector((state) => state.user.coreConfig);
@@ -246,7 +246,9 @@ export default function SettingsPage() {
   };
 
   return (
-    <main className="main-layout settings-layout">
+    <main
+      className={`main-layout settings-layout${isInIframe ? " isInIframe" : ""}`}
+    >
       <Box className="settings-sidebar">
         <List>
           <ListItem