TTYG leave space for scroll gutters

- Reserve space for scroll gutters
- Don't change overall spacing

- Having gutters cover content is annoying

- Padding inside all central elements (toolbar, chat, input)
- Plus: less padding outside
- Equals: gaps for gutters and same spacing

src/css/ttyg/chat-panel.css

@@ -18,12 +18,10 @@
  overflow-y: hidden;
  scrollbar-gutter: stable;
  /*
- this padding is needed to prevent a safari weirdness with the invisible scroll gutter
- hiding the border of the explain boxes
- (needed on the right only but set also left to keep the symetry)
+ space for scroll gutters - we don't want them inside the chat
  */
- padding-left: 1px;
- padding-right: 1px;
+ padding-left: 1rem;
+ padding-right: 1rem;
 }
 
 .chat-panel:hover .chat-details {
@@ -68,6 +66,7 @@
 
 .chat-panel .new-question {
  width: 100%;
+ padding: 0 1rem;
 }
 
 .chat-panel .new-question .question-input {

src/css/ttyg/ttyg.css

@@ -121,16 +121,15 @@ chat area
 }
 
 .ttyg-view .chat-content {
- padding: 0 2rem;
 }
 
 .ttyg-view .chat-content .toolbar {
  margin: auto;
- padding: 0;
+ padding: 0 1rem;
 }
 
 .ttyg-view .chat-content .chat {
- max-width: 800px;
+ max-width: calc(800px + 2rem);
  margin: auto;
  height: calc(100vh - 13em);
  display: flex;