From f24ca2d1b03790deba3fb92312bb244770896056 Mon Sep 17 00:00:00 2001
From: Adam Solove <asolove@gmail.com>
Date: Sat, 31 Dec 2022 16:56:52 -0500
Subject: [PATCH] Start making anchor work on phone.

- Update chats, editor, and editor messages to respond better to narrow widths.
- Does not yet fix File/Option menus, which need a different layout on phone.
---
 ide/src/Chatitor.tsx |  2 +-
 ide/src/index.css    | 20 +++++---------------
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/ide/src/Chatitor.tsx b/ide/src/Chatitor.tsx
index 1cb536c42..7cd004bdb 100644
--- a/ide/src/Chatitor.tsx
+++ b/ide/src/Chatitor.tsx
@@ -221,7 +221,7 @@ function Chatitor({
   );
   const promptHint = (
     <div style={{
-      width: '48em',
+      width: '100%',
       textAlign: 'right',
       margin: '0.3em auto',
       transition: isFocused ? 'opacity 0.2s 1s ease-in' : 'opacity 0.2s ease-in',
diff --git a/ide/src/index.css b/ide/src/index.css
index 5c371d140..e7f58aa79 100644
--- a/ide/src/index.css
+++ b/ide/src/index.css
@@ -39,24 +39,15 @@ and overriding of rules. */
 }
 
 .chat-scroll {
-  width: 100%;
   overflow: auto;
   display: flex;
   flex-direction: column;
+  width: calc(min(100%, 60em) - 20px);
+  margin: 0 auto;
 }
 
-.chat-layout-compact .chats,
-.chat-layout-normal .chats {
-  margin: 2em auto;
-}
-
-.chat-layout-compact .chats {
-  width: 70em;
-  min-width: 40em;
-}
-.chat-layout-normal .chats {
-  min-width: 40em;
-  max-width: min(70%, 60em);
+.chats {
+  margin: 2em;
 }
 
 .chat-layout-compact .chat .CodeMirror,
@@ -172,8 +163,7 @@ and overriding of rules. */
 }
 
 .prompt {
-  width: 45em;
-  margin: 0 auto;
+  margin: 0 4em 0 2em;
   position: relative;
 }
 .send-button {