From 965445498411c3481b0bdbf831f09b2364e00948 Mon Sep 17 00:00:00 2001 From: gagik Date: Thu, 4 Sep 2025 18:03:40 +0200 Subject: [PATCH 1/3] chore(compass-assistant): apply patches to assistant styling COMPASS-9790 Fixes issues with: - minimum window size breaking workspaces when assistant - headings having bad spacing - assistant name not being bold - drawer opening with weird wrapping --- .../compass-assistant/src/assistant-chat.tsx | 19 ++++++++++++++++--- .../components/drawer/drawer/drawer.styles.ts | 3 +-- .../src/components/workspaces.tsx | 17 ++++++++++++----- 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/packages/compass-assistant/src/assistant-chat.tsx b/packages/compass-assistant/src/assistant-chat.tsx index 3f41eb287b0..55d964f29ed 100644 --- a/packages/compass-assistant/src/assistant-chat.tsx +++ b/packages/compass-assistant/src/assistant-chat.tsx @@ -71,29 +71,36 @@ const assistantChatFixesStyles = css({ }, /** TODO(COMPASS-9751): We're adjusting styling of all the headers to a lower level than the default for chat, this should be updated in Leafygreen as well and removed from our end. */ 'h1, h2, h3, h4, h5, h6': { - margin: 'unset', fontFamily: fontFamilies.default, + margin: 'unset', }, /** h4, h5, h6 -> body 1 styling */ 'h4, h5, h6': { fontSize: '13px', + lineHeight: '15px', + marginTop: '4px', }, /** h1 -> h3 styling */ h1: { - fontSize: '24px', - lineHeight: '32px', + fontSize: '20px', + marginTop: '8px', fontWeight: 'medium', + lineHeight: '22px', }, /** h2 -> subtitle styling */ h2: { color: '#001E2B', fontWeight: 'semibold', fontSize: '18px', + lineHeight: '20px', + marginTop: '8px', }, /** h3 -> body 2 styling */ h3: { fontSize: '16px', fontWeight: 'semibold', + lineHeight: '18px', + marginTop: '4px', }, }); const messageFeedFixesStyles = css({ @@ -102,6 +109,12 @@ const messageFeedFixesStyles = css({ overflowY: 'auto', flex: 1, padding: spacing[400], + gap: spacing[400], + + // TODO(COMPASS-9751): We're setting the font weight to 600 here as the LG styling for the Assistant header isn't set + '& > div > div:has(svg[aria-label="Sparkle Icon"]) p': { + fontWeight: 600, + }, }); const chatWindowFixesStyles = css({ height: '100%', diff --git a/packages/compass-components/src/components/drawer/drawer/drawer.styles.ts b/packages/compass-components/src/components/drawer/drawer/drawer.styles.ts index 81bfba2bbbe..111c66b04e0 100644 --- a/packages/compass-components/src/components/drawer/drawer/drawer.styles.ts +++ b/packages/compass-components/src/components/drawer/drawer/drawer.styles.ts @@ -54,8 +54,7 @@ const getBaseStyles = ({ theme }: { theme: Theme }) => css` all: unset; background-color: ${color[theme].background.primary.default}; border: 1px solid ${color[theme].border.secondary.default}; - width: 100%; - max-width: ${PANEL_WIDTH}px; + width: ${PANEL_WIDTH}px; height: 100%; overflow: hidden; box-sizing: border-box; diff --git a/packages/compass-workspaces/src/components/workspaces.tsx b/packages/compass-workspaces/src/components/workspaces.tsx index 3ec7dcc56b7..a60befcebf9 100644 --- a/packages/compass-workspaces/src/components/workspaces.tsx +++ b/packages/compass-workspaces/src/components/workspaces.tsx @@ -65,6 +65,11 @@ const workspacesContentStyles = css({ minHeight: 0, }); +const workspacesSectionStyles = css({ + display: 'flex', + minWidth: '600px', +}); + type CompassWorkspacesProps = { tabs: WorkspaceTab[]; activeTab?: WorkspaceTab | null; @@ -217,11 +222,13 @@ const CompassWorkspaces: React.FunctionComponent = ({
- {activeTab && workspaceTabContent ? ( - workspaceTabContent - ) : ( - - )} +
+ {activeTab && workspaceTabContent ? ( + workspaceTabContent + ) : ( + + )} +
From 509a4f57e863844c3ae1b737bbe9abfaf48c7141 Mon Sep 17 00:00:00 2001 From: gagik Date: Thu, 4 Sep 2025 20:30:16 +0200 Subject: [PATCH 2/3] chore: fix workspaces --- packages/compass-workspaces/src/components/workspaces.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/compass-workspaces/src/components/workspaces.tsx b/packages/compass-workspaces/src/components/workspaces.tsx index a60befcebf9..0dcdd35b9cc 100644 --- a/packages/compass-workspaces/src/components/workspaces.tsx +++ b/packages/compass-workspaces/src/components/workspaces.tsx @@ -68,6 +68,7 @@ const workspacesContentStyles = css({ const workspacesSectionStyles = css({ display: 'flex', minWidth: '600px', + width: '100%', }); type CompassWorkspacesProps = { From c28ff1dfd0f4ba4f1df9e09fcbd56fb644704d74 Mon Sep 17 00:00:00 2001 From: gagik Date: Thu, 4 Sep 2025 20:33:38 +0200 Subject: [PATCH 3/3] chore: change width of inner container instead --- .../src/components/drawer/drawer/drawer.styles.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/compass-components/src/components/drawer/drawer/drawer.styles.ts b/packages/compass-components/src/components/drawer/drawer/drawer.styles.ts index 111c66b04e0..471bd2b1304 100644 --- a/packages/compass-components/src/components/drawer/drawer/drawer.styles.ts +++ b/packages/compass-components/src/components/drawer/drawer/drawer.styles.ts @@ -54,7 +54,7 @@ const getBaseStyles = ({ theme }: { theme: Theme }) => css` all: unset; background-color: ${color[theme].background.primary.default}; border: 1px solid ${color[theme].border.secondary.default}; - width: ${PANEL_WIDTH}px; + max-width: ${PANEL_WIDTH}px; height: 100%; overflow: hidden; box-sizing: border-box; @@ -206,6 +206,7 @@ const getInnerOpenContainerStyles = css` transition-duration: ${transitionDuration.slowest}ms; transition-timing-function: linear; opacity: 1; + width: ${PANEL_WIDTH}px; `; export const getInnerContainerStyles = ({