Improve chat dialog spacing and layout

[nkuehn]

The chat dialog's slightly unpolished look has always bugged my given the eyes that are currently on it.

Here's a few tweaks that adress my personal main scratch points

• limit the dialog content to a content page width with sidebar to prevent it from becoming unreadably wide in the text output on wide screens
• sligthly wider right hand column, it turns out we have to give it more focus because users start using the AI instead of search
• remove duplicated spacing in the resources list
• make the resources list scroll inside the rounded box, not the rounded box scroll inside an invisible box (not sure why this slipped through initially)
• align the bottom content elements with the invisible dialog content area (no extra bottom spacing on top of the dialog's own spacing)
• take back 8px of duplicate spacing at the top (not sure why the dialog has its spacing and then another spacing on top of the dialog - hack through negative margin, did not want to touch the dialog proper
• shorting the hint text in the input box so that it actually fits on mobile, too

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 0a654b6634dc0639a28fc694f56d85078928f4cc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@commercetools-docs/gatsby-theme-docs	Patch
@commercetools-website/api-docs-smoke-test	Patch
@commercetools-website/docs-smoke-test	Patch
@commercetools-website/documentation	Patch
@commercetools-website/self-learning-smoke-test	Patch
@commercetools-website/site-template	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions[bot]]

🚚 Build Process Details

Preview URLs:

• https://docskit-nk-fix-chat-spacing.commercetools.vercel.app (permalink to the last build of this branch)
• https://docskit-sha-3b423b8d4c7b7afa97af190a3a3003c8695ccabd.commercetools.vercel.app (this commit)

[zbalek]

Hi @nkuehn - I'm okay to approve the changes but the hint in the text field does not sound correct and it seems that we just accidentally made a mistake there

[nkuehn]

@zbalek Thanks for checking and catching the accidental text change. I'll revert it.

this is not trying to replace other work you do - I see it rather as polish we would normally have done with the initial release aready if we had more time back then. Another factor is that we have increasingly long microsite and page names and the sidebar layout got really hard to read with these.

Apropos copywriting: The "Tip": link at the bottom is rarely used but we have actual problems with people changing the subject too much in a given conversation. Can you imagine a copy that is more explicit? "click here" is what I would want to say but it's sounding bad.

[zbalek]

@nkuehn RE Tip: Perhaps the issue now is that people do not realise that it is in fact a CTA.

I'd suggest two options here:

A) A flat button component and adding a refresh icon on the left. In terms of copy, below are some suggestions that could work better.

B) Having it as a link, i.e. underlining the text + adding the refresh icon to capture the attention when a user scans through the page.

Personally, I'm leaning towards the se

---

[nkuehn]

This is how the dialog looks like on wider screens. Is that intentional?

Yes, columns with text content to read should never get wider than a line length that the human eye can easily track. But that it gets smaller on large screens is clearly a bug, thank you for spotting that!

ideally the modal itself would never get as wide at all though but I think @gabriele-ct once told me that something limits our control over it. True still?

[gabriele-ct]

This is how the dialog looks like on wider screens. Is that intentional?

Yes, columns with text content to read should never get wider than a line length that the human eye can easily track. But that it gets smaller on large screens is clearly a bug, thank you for spotting that!

ideally the modal itself would never get as wide at all though but I think @gabriele-ct once told me that something limits our control over it. True still?

FormDialog component accepts a prop size. After trying some of the options available I came to the conclusion that the only value which is usable for our purposes is scale which adapts the size of the modal to fill the whole avaliable space. In other cases we get along with l for example the chat feedback and the profile modals. I had tried that value but, it was too small for the content we wanted to display.

So, in short yes, we still have that limitation, and maybe we could explore other options, like for example use a drawer component for the ai assistant.

[nkuehn]

@gabriele-ct thank you! Let's live with the whitespace at the sides for now then. Mid term I would rather like to research a sidebar that is not modal so that it becomes possible to navigate the content with the assistant staying open (would only work without separately built microsites)

I pushed a commit that removes the separate handling of the wide screen with spacer elements - spacer elements are not needed, the container has a max width and is auto centered.

@zbalek I'l leave the restart text as is to not overscope this change before going on vacation. I think we need to address both the visual as well as the language copy of the CTA. To make the language clearly a CTA we may have to separate out the explanation, e.g. the CTA being just "Start a new Conversation" and visually different the explanation "Gives better results when changing the topic".

[nkuehn]

@timonrey sorry and thank you - my git skills got worse quite fast. Missed half of the files somehow (should stop using stashing partial changes if I don't get it right...).