chore: fix sidebar mobile responsiveness. (#38159)

https://github.com/user-attachments/assets/6eadc643-da55-4b9c-9aae-f07e09bd34cd

/ok-to-test tags="@tag.Anvil"

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Enhanced mobile responsiveness for the sidebar component with the
addition of a new data attribute.

- **Bug Fixes**
- Improved styling conditions for the sidebar in various states,
ensuring better visual consistency across mobile and full-width
displays.

- **Style**
- Updated CSS selectors for more precise styling of the sidebar,
enhancing its responsive behavior.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12314321713>
> Commit: 3ee6c76
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12314321713&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Fri, 13 Dec 2024 11:17:26 UTC
<!-- end of auto-generated comment: Cypress test results  -->

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}

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;
 }