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..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,6 @@ 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; height: 100%; overflow: hidden; @@ -207,6 +206,7 @@ const getInnerOpenContainerStyles = css` transition-duration: ${transitionDuration.slowest}ms; transition-timing-function: linear; opacity: 1; + width: ${PANEL_WIDTH}px; `; export const getInnerContainerStyles = ({ diff --git a/packages/compass-workspaces/src/components/workspaces.tsx b/packages/compass-workspaces/src/components/workspaces.tsx index 3ec7dcc56b7..0dcdd35b9cc 100644 --- a/packages/compass-workspaces/src/components/workspaces.tsx +++ b/packages/compass-workspaces/src/components/workspaces.tsx @@ -65,6 +65,12 @@ const workspacesContentStyles = css({ minHeight: 0, }); +const workspacesSectionStyles = css({ + display: 'flex', + minWidth: '600px', + width: '100%', +}); + type CompassWorkspacesProps = { tabs: WorkspaceTab[]; activeTab?: WorkspaceTab | null; @@ -217,11 +223,13 @@ const CompassWorkspaces: React.FunctionComponent = ({
- {activeTab && workspaceTabContent ? ( - workspaceTabContent - ) : ( - - )} +
+ {activeTab && workspaceTabContent ? ( + workspaceTabContent + ) : ( + + )} +