From 9a479544a66f70eb4e21d141b1a07be6db36b53f Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Thu, 22 Jan 2026 10:25:39 +0100
Subject: [PATCH] Add support for rounded layout (#18283)

---
 .../src/app/layout/desktop-layout.component.html      |  2 +-
 libs/components/src/layout/layout.component.html      |  3 ++-
 libs/components/src/layout/layout.component.ts        |  8 +++++++-
 libs/components/src/layout/layout.stories.ts          | 11 ++++++++++-
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/apps/desktop/src/app/layout/desktop-layout.component.html b/apps/desktop/src/app/layout/desktop-layout.component.html
index cb969f573fc..f9921ac11ef 100644
--- a/apps/desktop/src/app/layout/desktop-layout.component.html
+++ b/apps/desktop/src/app/layout/desktop-layout.component.html
@@ -1,4 +1,4 @@
-<bit-layout class="!tw-h-full">
+<bit-layout class="!tw-h-full" rounded>
   <app-side-nav slot="side-nav">
     <bit-nav-logo [openIcon]="logo" route="." [label]="'passwordManager' | i18n" />
 
diff --git a/libs/components/src/layout/layout.component.html b/libs/components/src/layout/layout.component.html
index 255799b6690..66bfcafafe9 100644
--- a/libs/components/src/layout/layout.component.html
+++ b/libs/components/src/layout/layout.component.html
@@ -1,5 +1,5 @@
 @let mainContentId = "main-content";
-<div class="tw-flex tw-size-full">
+<div class="tw-flex tw-size-full" [class.tw-bg-background-alt3]="rounded()">
   <div class="tw-flex tw-size-full" cdkTrapFocus>
     <div
       class="tw-fixed tw-z-50 tw-w-full tw-flex tw-justify-center tw-opacity-0 focus-within:tw-opacity-100 tw-pointer-events-none focus-within:tw-pointer-events-auto"
@@ -24,6 +24,7 @@
       tabindex="-1"
       bitScrollLayoutHost
       class="tw-overflow-auto tw-max-h-full tw-min-w-0 tw-flex-1 tw-bg-background tw-p-8 tw-pt-6 tw-@container"
+      [class.tw-rounded-tl-2xl]="rounded()"
     >
       <!-- ^ If updating this padding, also update the padding correction in bit-banner! ^ -->
       <ng-content></ng-content>
diff --git a/libs/components/src/layout/layout.component.ts b/libs/components/src/layout/layout.component.ts
index 7460099cf92..5e3d420c8e5 100644
--- a/libs/components/src/layout/layout.component.ts
+++ b/libs/components/src/layout/layout.component.ts
@@ -1,7 +1,7 @@
 import { A11yModule, CdkTrapFocus } from "@angular/cdk/a11y";
 import { PortalModule } from "@angular/cdk/portal";
 import { CommonModule } from "@angular/common";
-import { Component, ElementRef, inject, viewChild } from "@angular/core";
+import { booleanAttribute, Component, ElementRef, inject, input, viewChild } from "@angular/core";
 import { RouterModule } from "@angular/router";
 
 import { DrawerHostDirective } from "../drawer/drawer-host.directive";
@@ -38,6 +38,12 @@ export class LayoutComponent {
   protected drawerPortal = inject(DrawerService).portal;
 
   private readonly mainContent = viewChild.required<ElementRef<HTMLElement>>("main");
+
+  /**
+   * Rounded top left corner for the main content area
+   */
+  readonly rounded = input(false, { transform: booleanAttribute });
+
   protected focusMainContent() {
     this.mainContent().nativeElement.focus();
   }
diff --git a/libs/components/src/layout/layout.stories.ts b/libs/components/src/layout/layout.stories.ts
index 59770c21d2e..75ae329a1b3 100644
--- a/libs/components/src/layout/layout.stories.ts
+++ b/libs/components/src/layout/layout.stories.ts
@@ -14,6 +14,8 @@ import { StorybookGlobalStateProvider } from "../utils/state-mock";
 import { LayoutComponent } from "./layout.component";
 import { mockLayoutI18n } from "./mocks";
 
+import { formatArgsForCodeSnippet } from ".storybook/format-args-for-code-snippet";
+
 export default {
   title: "Component Library/Layout",
   component: LayoutComponent,
@@ -63,7 +65,7 @@ export const WithContent: Story = {
   render: (args) => ({
     props: args,
     template: /* HTML */ `
-      <bit-layout>
+      <bit-layout ${formatArgsForCodeSnippet<LayoutComponent>(args)}>
         <bit-side-nav>
           <bit-nav-group text="Hello World (Anchor)" [route]="['a']" icon="bwi-filter">
             <bit-nav-item text="Child A" route="a" icon="bwi-filter"></bit-nav-item>
@@ -111,3 +113,10 @@ export const Secondary: Story = {
     `,
   }),
 };
+
+export const Rounded: Story = {
+  ...WithContent,
+  args: {
+    rounded: true,
+  },
+};