fix(ui-shell): do not unset Content left margin for rail SideNav (#1462)

Fixes #1459

src/UIShell/Content.svelte

@@ -2,14 +2,23 @@
   /** Specify the id for the main element */
   export let id = "main-content";
 
-  import { isSideNavCollapsed } from "./navStore";
+  import { isSideNavCollapsed, isSideNavRail } from "./navStore";
+
+  /**
+   * By default, the `SideNav` applies a left margin of `3rem` to `Content`
+   * if it's a sibling component (e.g., .bx--side-nav ~ .bx--content).
+   *
+   * We manually unset the left margin if the `SideNav`
+   * is collapsed and if it's not the `rail` variant.
+   */
+  $: unsetLeftMargin = $isSideNavCollapsed && !$isSideNavRail;
 </script>
 
 <main
   id="{id}"
   class:bx--content="{true}"
   {...$$restProps}
-  style="{$isSideNavCollapsed && 'margin-left: 0;'} {$$restProps.style}}"
+  style="{unsetLeftMargin && 'margin-left: 0;'} {$$restProps.style}}"
 >
   <slot />
 </main>

src/UIShell/SideNav.svelte

@@ -32,7 +32,11 @@
   export let expansionBreakpoint = 1056;
 
   import { onMount, createEventDispatcher } from "svelte";
-  import { shouldRenderHamburgerMenu, isSideNavCollapsed } from "./navStore";
+  import {
+    shouldRenderHamburgerMenu,
+    isSideNavCollapsed,
+    isSideNavRail,
+  } from "./navStore";
 
   const dispatch = createEventDispatcher();
 
@@ -40,6 +44,7 @@
 
   $: dispatch(isOpen ? "open" : "close");
   $: $isSideNavCollapsed = !isOpen;
+  $: $isSideNavRail = rail;
 
   onMount(() => {
     shouldRenderHamburgerMenu.set(true);

src/UIShell/navStore.js

@@ -3,3 +3,5 @@ import { writable } from "svelte/store";
 export const shouldRenderHamburgerMenu = writable(false);
 
 export const isSideNavCollapsed = writable(false);
+
+export const isSideNavRail = writable(false);