diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/Sidebar.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/Sidebar.tsx
index 820de64e50f3..f758522a8267 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/Sidebar.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/Sidebar.tsx
@@ -23,7 +23,7 @@ const _Sidebar = (props: SidebarProps, ref: Ref<HTMLDivElement>) => {
     ...rest
   } = props;
   const [isAnimating, setIsAnimating] = useState(false);
-  const { side, state } = useSidebar();
+  const { isMobile, side, state } = useSidebar();
   const sidebarRef = useRef<HTMLDivElement>();
 
   const onEnter = () => {
@@ -84,6 +84,7 @@ const _Sidebar = (props: SidebarProps, ref: Ref<HTMLDivElement>) => {
         <div
           className={clsx(styles.mainSidebar)}
           data-collapsible={state === "collapsed" ? collapsible : ""}
+          data-is-mobile={isMobile ? "" : undefined}
           data-side={side}
           data-state={state}
           data-variant={variant}
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Sidebar/src/styles.module.css
index 0b51b7d0547c..b0b04ccaad19 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/styles.module.css
@@ -22,14 +22,12 @@
   overflow: hidden;
 }
 
-[data-state="full-width"] .sidebar {
+.mainSidebar[data-state="full-width"] {
   --sidebar-width: 100cqw;
 }
 
-@container (width > 550px) {
-  .mainSidebar {
-    --sidebar-width: min(50cqw, 1024px);
-  }
+.mainSidebar:not([data-is-mobile], [data-state="full-width"]) {
+  --sidebar-width: min(50cqw, 1024px);
 }
 
 /**
@@ -102,21 +100,21 @@
   width: calc(var(--sidebar-width-icon));
 }
 
-@container (width > 550px) {
-  .mainSidebar[data-side="start"] .sidebar {
-    border-inline-end: var(--border-width-1) solid var(--color-bd-elevation-1);
-  }
+.mainSidebar[data-side="start"]:not([data-is-mobile]) .sidebar {
+  border-inline-end: var(--border-width-1) solid var(--color-bd-elevation-1);
+}
 
-  .mainSidebar[data-side="end"] .sidebar {
-    border-inline-start: var(--border-width-1) solid var(--color-bd-elevation-1);
-  }
+.mainSidebar[data-side="end"]:not([data-is-mobile]) .sidebar {
+  border-inline-start: var(--border-width-1) solid var(--color-bd-elevation-1);
 }
 
-.mainSidebar[data-state="full-width"][data-side="start"] .sidebar {
+.mainSidebar:is([data-state="full-width"][data-side="start"], [data-is-mobile])
+  .sidebar {
   border-inline-end: none;
 }
 
-.mainSidebar[data-state="full-width"][data-side="end"] .sidebar {
+.mainSidebar:is([data-state="full-width"][data-side="end"], [data-is-mobile])
+  .sidebar {
   border-inline-start: none;
 }