fix: workspace sizes (carbon-design-system#1026)

ethanwinters · web-flow · commit 3f78178a323b · 2026-03-02T22:02:32.000Z
diff --git a/demo/src/framework/demo-chat-version-switcher.ts b/demo/src/framework/demo-chat-version-switcher.ts
@@ -250,7 +250,6 @@ export class VersionDropdown extends LitElement {
       <cds-dropdown
         title-text="Select @carbon/ai-chat version"
         helper-text="Changing will reset all other settings"
-        size="sm"
         .value=${this.selectedValue}
         @cds-dropdown-selected=${this.handleChange}
       >
diff --git a/demo/src/react/WorkspaceWriteableElementExample.css b/demo/src/react/WorkspaceWriteableElementExample.css
diff --git a/demo/src/react/WorkspaceWriteableElementExample.tsx b/demo/src/react/WorkspaceWriteableElementExample.tsx
@@ -7,7 +7,6 @@
  *  @license
  */
 
-import "./WorkspaceWriteableElementExample.css"; // Assuming styles are in a separate CSS file
 import WorkspaceShell, {
   WorkspaceShellHeader,
   WorkspaceShellBody,
diff --git a/demo/src/web-components/workspace-writeable-element-example.ts b/demo/src/web-components/workspace-writeable-element-example.ts
@@ -7,7 +7,7 @@
  *  @license
  */
 
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import "@carbon/web-components/es/components/button/index.js";
 import { PanelType } from "@carbon/ai-chat";
@@ -31,12 +31,6 @@ import Edit16 from "@carbon/icons/es/edit/16.js";
 
 @customElement("workspace-writeable-element-example")
 class WorkspaceWriteableElementExample extends LitElement {
-  static styles = css`
-    [slot="workspacePanelElement"] {
-      block-size: 100%;
-    }
-  `;
-
   @property({ type: String })
   accessor location: string = "";
 
diff --git a/examples/web-components/workspace-sidebar/src/inventory-report-example.ts b/examples/web-components/workspace-sidebar/src/inventory-report-example.ts
@@ -45,9 +45,6 @@ import Edit16 from "@carbon/icons/es/edit/16.js";
 @customElement("inventory-report-example")
 class InventoryReportExample extends LitElement {
   static styles = css`
-    [slot="workspacePanelElement"] {
-      block-size: 100%;
-    }
     pre {
       background: #f4f4f4;
       padding: 1rem;
diff --git a/examples/web-components/workspace-sidebar/src/inventory-status-example.ts b/examples/web-components/workspace-sidebar/src/inventory-status-example.ts
@@ -21,10 +21,6 @@ import Close16 from "@carbon/icons/es/close/16.js";
 @customElement("inventory-status-example")
 class InventoryStatusExample extends LitElement {
   static styles = css`
-    [slot="workspacePanelElement"] {
-      block-size: 100%;
-    }
-
     pre {
       background: #f4f4f4;
       padding: 1rem;
diff --git a/examples/web-components/workspace-sidebar/src/outstanding-orders-example.ts b/examples/web-components/workspace-sidebar/src/outstanding-orders-example.ts
@@ -7,7 +7,7 @@
  *  @license
  */
 
-import { LitElement, html, css } from "lit";
+import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import type { ChatInstance } from "@carbon/ai-chat";
 import { PanelType } from "@carbon/ai-chat";
@@ -255,12 +255,6 @@ const orders = [
 
 @customElement("outstanding-orders-example")
 export class OutstandingOrdersExample extends LitElement {
-  static styles = css`
-    [slot="workspacePanelElement"] {
-      block-size: 100%;
-    }
-  `;
-
   @property({ type: String })
   accessor location = "";
 
diff --git a/examples/web-components/workspace/src/inventory-report-example.ts b/examples/web-components/workspace/src/inventory-report-example.ts
@@ -45,9 +45,6 @@ import Edit16 from "@carbon/icons/es/edit/16.js";
 @customElement("inventory-report-example")
 class InventoryReportExample extends LitElement {
   static styles = css`
-    [slot="workspacePanelElement"] {
-      block-size: 100%;
-    }
     pre {
       background: #f4f4f4;
       padding: 1rem;
diff --git a/examples/web-components/workspace/src/inventory-status-example.ts b/examples/web-components/workspace/src/inventory-status-example.ts
@@ -21,10 +21,6 @@ import Close16 from "@carbon/icons/es/close/16.js";
 @customElement("inventory-status-example")
 class InventoryStatusExample extends LitElement {
   static styles = css`
-    [slot="workspacePanelElement"] {
-      block-size: 100%;
-    }
-
     pre {
       background: #f4f4f4;
       padding: 1rem;
diff --git a/examples/web-components/workspace/src/outstanding-orders-example.ts b/examples/web-components/workspace/src/outstanding-orders-example.ts
@@ -7,7 +7,7 @@
  *  @license
  */
 
-import { LitElement, html, css } from "lit";
+import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import type { ChatInstance } from "@carbon/ai-chat";
 import { PanelType } from "@carbon/ai-chat";
@@ -26,12 +26,6 @@ import Close16 from "@carbon/icons/es/close/16.js";
 
 @customElement("outstanding-orders-example")
 export class OutstandingOrdersExample extends LitElement {
-  static styles = css`
-    [slot="workspacePanelElement"] {
-      block-size: 100%;
-    }
-  `;
-
   @property({ type: String })
   accessor location = "";
 
diff --git a/packages/ai-chat-components/src/components/workspace-shell/src/workspace-shell-header.scss b/packages/ai-chat-components/src/components/workspace-shell/src/workspace-shell-header.scss
@@ -24,6 +24,8 @@ $css--plex: true !default;
   border-block-end: solid rem(1px) theme.$chat-bubble-border;
   color: theme.$text-secondary;
   grid-auto-flow: column;
+  overflow-x: hidden;
+  overflow-y: auto;
 
   @include type.type-style("body-01");
 
diff --git a/packages/ai-chat-components/src/components/workspace-shell/src/workspace-shell.scss b/packages/ai-chat-components/src/components/workspace-shell/src/workspace-shell.scss
@@ -17,12 +17,26 @@ $css--plex: true !default;
 @use "@carbon/styles/scss/utilities/convert" as *;
 @use "@carbon/styles/scss/breakpoint" as *;
 
+.workspace {
+  display: flex;
+  overflow: hidden;
+  flex-direction: row;
+  block-size: 100%;
+  inline-size: 100%;
+  max-block-size: 100%;
+  max-inline-size: 100%;
+}
+
+.body {
+  flex-grow: 1;
+}
+
 /* Workspace shell styles */
 :host(#{$prefix}-workspace-shell) {
   @include type.type-style("body-01");
 
   display: flex;
-  overflow: auto;
+  overflow: hidden;
   /* stylelint-disable-next-line declaration-no-important */
   box-sizing: border-box !important;
   flex-direction: column;
diff --git a/packages/ai-chat-components/src/components/workspace-shell/src/workspace-shell.ts b/packages/ai-chat-components/src/components/workspace-shell/src/workspace-shell.ts
@@ -32,8 +32,12 @@ class CDSAIChatWorkspaceShell extends LitElement {
       <slot name="toolbar"></slot>
       <slot name="notification"></slot>
       <slot name="header"></slot>
-      <slot name="body"></slot>
+      </div>
+      <div class="body">
+        <slot name="body"></slot>
+      </div>
       <slot name="footer"></slot>
+  </div>
     `;
   }
 }
diff --git a/packages/ai-chat/src/chat/AppShellStyles.scss b/packages/ai-chat/src/chat/AppShellStyles.scss
@@ -60,9 +60,32 @@
    Reusable utility classes for common patterns
    ============================================================================ */
 
-.cds-aichat--widget--expand-to-fit {
+// Mixin for elements that should expand to fit their container
+@mixin expand-to-fit {
+  overflow: hidden;
   block-size: 100%;
   inline-size: 100%;
+  max-block-size: 100%;
+  max-inline-size: 100%;
+  min-block-size: 0;
+  min-inline-size: 0;
+}
+
+// Mixin for workspace panel slotted content with additional constraints
+@mixin workspace-panel-slotted {
+  overflow: hidden;
+  block-size: 100%;
+  max-block-size: 100%;
+}
+
+.cds-aichat--widget--expand-to-fit {
+  @include expand-to-fit;
+}
+
+.cds-aichat--workspace-writeable-element {
+  ::slotted(*) {
+    @include workspace-panel-slotted;
+  }
 }
 
 .cds-aichat--hidden {
diff --git a/packages/ai-chat/src/chat/components-legacy/launcher/Launcher.tsx b/packages/ai-chat/src/chat/components-legacy/launcher/Launcher.tsx
@@ -302,6 +302,11 @@ function Launcher(props: LauncherProps) {
         ref={handleButtonRef}
         tabIndex={buttonTabIndex}
         type={BUTTON_TYPE.BUTTON}
+        tooltipPosition={
+          document.dir === "rtl"
+            ? BUTTON_TOOLTIP_POSITION.RIGHT
+            : BUTTON_TOOLTIP_POSITION.LEFT
+        }
       >
         <div className="cds-aichat--launcher__wrapper">
           <div
diff --git a/packages/ai-chat/src/web-components/cds-aichat-container/cds-aichat-internal.tsx b/packages/ai-chat/src/web-components/cds-aichat-container/cds-aichat-internal.tsx
@@ -83,9 +83,6 @@ class ChatContainerInternal extends LitElement {
         box-sizing: border-box;
         ${this.element ? "" : "z-index: var(--cds-aichat-z-index);"}
       }
-      [slot="workspacePanelElement"] {
-        block-size: 100%;
-      }
     `;
     this.appendChild(style);
     if (this.config) {
diff --git a/packages/ai-chat/src/web-components/cds-aichat-container/index.ts b/packages/ai-chat/src/web-components/cds-aichat-container/index.ts
@@ -203,16 +203,6 @@ class ChatContainer extends LitElement {
   @state()
   _instance: ChatInstance;
 
-  firstUpdated() {
-    const style = document.createElement("style");
-    style.textContent = `
-      [slot="workspacePanelElement"] {
-        block-size: 100%;
-      }
-    `;
-    this.appendChild(style);
-  }
-
   /**
    * Adds the slot attribute to the element for the user_defined response type and then injects it into the component by
    * updating this._userDefinedSlotNames;
@@ -361,7 +351,9 @@ class ChatContainer extends LitElement {
       if (!element) {
         return;
       }
+
       element.setAttribute("slot", slot);
+
       if (!element.isConnected) {
         this.appendChild(element);
       }
@@ -379,10 +371,10 @@ class ChatContainer extends LitElement {
       .element=${this.element}
     >
       ${this._writeableElementSlots.map(
-        (slot) => html`<div slot=${slot}><slot name=${slot}></slot></div>`,
+        (slot) => html`<slot name=${slot} slot=${slot}></slot>`,
       )}
       ${this._userDefinedSlotNames.map(
-        (slot) => html`<div slot=${slot}><slot name=${slot}></slot></div>`,
+        (slot) => html`<slot name=${slot} slot=${slot}></slot>`,
       )}
       ${this._customFooterSlotNames.map(
         (slot) => html`<div slot=${slot}><slot name=${slot}></slot></div>`,
diff --git a/packages/ai-chat/src/web-components/cds-aichat-custom-element/index.ts b/packages/ai-chat/src/web-components/cds-aichat-custom-element/index.ts
@@ -89,16 +89,6 @@ class ChatCustomElement extends LitElement {
     `);
   }
 
-  firstUpdated() {
-    const style = document.createElement("style");
-    style.textContent = `
-      [slot="workspacePanelElement"] {
-        block-size: 100%;
-      }
-    `;
-    this.appendChild(style);
-  }
-
   /**
    * Adopt our stylesheet into every shadowRoot.
    */
@@ -421,10 +411,10 @@ class ChatCustomElement extends LitElement {
         .element=${this}
       >
         ${this._writeableElementSlots.map(
-          (slot) => html`<div slot=${slot}><slot name=${slot}></slot></div>`,
+          (slot) => html`<slot name=${slot} slot=${slot}></slot>`,
         )}
         ${this._userDefinedSlotNames.map(
-          (slot) => html`<div slot=${slot}><slot name=${slot}></slot></div>`,
+          (slot) => html`<slot name=${slot} slot=${slot}></slot>`,
         )}
         ${this._customFooterSlotNames.map(
           (slot) => html`<div slot=${slot}><slot name=${slot}></slot></div>`,

Original file line number	Diff line number	Diff line change
`@@ -250,7 +250,6 @@ export class VersionDropdown extends LitElement {`
`250`	`250`	`<cds-dropdown`
`251`	`251`	`title-text="Select @carbon/ai-chat version"`
`252`	`252`	`helper-text="Changing will reset all other settings"`
`253`		`- size="sm"`
`254`	`253`	`.value=${this.selectedValue}`
`255`	`254`	`@cds-dropdown-selected=${this.handleChange}`
`256`	`255`	`>`