fix: styles and mobile ux

.gitpod.yml

@@ -0,0 +1,11 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: yarn install && yarn run dev
+    command: yarn run dev
+
+

app/components/home.module.scss

@@ -27,7 +27,7 @@
 .tight-container {
   --window-width: 100vw;
   --window-height: 100vh;
-  --window-content-width: calc(var(--window-width) - var(--sidebar-width));
+  --window-content-width: calc(100% - var(--sidebar-width));
 
   @include container();
 
@@ -113,8 +113,7 @@
   overflow: auto;
 }
 
-.chat-list {
+.chat-list {}
-}
 
 .chat-item {
   padding: 10px 14px;
@@ -135,6 +134,7 @@
     opacity: 0;
     transform: translateY(20px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0px);
@@ -167,12 +167,12 @@
   opacity: 0;
 }
 
-.chat-item:hover > .chat-item-delete {
+.chat-item:hover>.chat-item-delete {
   opacity: 0.5;
   right: 10px;
 }
 
-.chat-item:hover > .chat-item-delete:hover {
+.chat-item:hover>.chat-item-delete:hover {
   opacity: 1;
 }
 
@@ -184,11 +184,9 @@
   margin-top: 8px;
 }
 
-.chat-item-count {
+.chat-item-count {}
-}
 
-.chat-item-date {
+.chat-item-date {}
-}
 
 .sidebar-tail {
   display: flex;
@@ -236,7 +234,7 @@
   animation: slide-in ease 0.3s;
 }
 
-.chat-message-user > .chat-message-container {
+.chat-message-user>.chat-message-container {
   align-items: flex-end;
 }
 
@@ -275,7 +273,7 @@
   border: var(--border-in-light);
 }
 
-.chat-message-user > .chat-message-container > .chat-message-item {
+.chat-message-user>.chat-message-container>.chat-message-item {
   background-color: var(--second);
 }
 
@@ -331,4 +329,4 @@
   position: absolute;
   right: 30px;
   bottom: 10px;
-}
+}

app/components/home.tsx

@@ -60,9 +60,8 @@ export function ChatItem(props: {
 }) {
   return (
     <div
-      className={`${styles["chat-item"]} ${
+      className={`${styles["chat-item"]} ${props.selected && styles["chat-item-selected"]
-        props.selected && styles["chat-item-selected"]
+        }`}
-      }`}
       onClick={props.onClick}
     >
       <div className={styles["chat-item-title"]}>{props.title}</div>
@@ -152,25 +151,25 @@ export function Chat(props: { showSideBar?: () => void }) {
     .concat(
       isLoading
         ? [
-            {
+          {
-              role: "assistant",
+            role: "assistant",
-              content: "……",
+            content: "……",
-              date: new Date().toLocaleString(),
+            date: new Date().toLocaleString(),
-              preview: true,
+            preview: true,
-            },
+          },
-          ]
+        ]
         : []
     )
     .concat(
       userInput.length > 0
         ? [
-            {
+          {
-              role: "user",
+            role: "user",
-              content: userInput,
+            content: userInput,
-              date: new Date().toLocaleString(),
+            date: new Date().toLocaleString(),
-              preview: true,
+            preview: true,
-            },
+          },
-          ]
+        ]
         : []
     );
 
@@ -236,7 +235,7 @@ export function Chat(props: { showSideBar?: () => void }) {
                 )}
                 <div className={styles["chat-message-item"]}>
                   {(message.preview || message.content.length === 0) &&
-                  !isUser ? (
+                    !isUser ? (
                     <LoadingIcon />
                   ) : (
                     <div className="markdown-body">
@@ -318,12 +317,12 @@ export function Home() {
 
   return (
     <div
-      className={`${
+      className={`${config.tightBorder ? styles["tight-container"] : styles.container
-        config.tightBorder ? styles["tight-container"] : styles.container
+        }`}
-      }`}
     >
       <div
         className={styles.sidebar + ` ${showSideBar && styles["sidebar-show"]}`}
+        onClick={() => setShowSideBar(false)}
       >
         <div className={styles["sidebar-header"]}>
           <div className={styles["sidebar-title"]}>ChatGPT Next</div>

app/globals.scss

@@ -45,7 +45,7 @@
   --window-width: 90vw;
   --window-height: 90vh;
   --sidebar-width: 300px;
-  --window-content-width: calc(var(--window-width) - var(--sidebar-width));
+  --window-content-width: calc(100% - var(--sidebar-width));
   --message-max-width: 80%;
 }
 
@@ -155,3 +155,7 @@ input[type="range"]::-webkit-slider-thumb:hover {
   transform: scaleY(1.2);
   width: 24px;
 }
+
+div.math {
+  overflow-x: auto;
+}

app/markdown.scss

@@ -319,7 +319,7 @@
   cursor: pointer;
 }
 
-.markdown-body details:not([open]) > *:not(summary) {
+.markdown-body details:not([open])>*:not(summary) {
   display: none !important;
 }
 
@@ -415,7 +415,6 @@
 .markdown-body p {
   margin-top: 0;
   margin-bottom: 10px;
-  overflow: auto;
 }
 
 .markdown-body blockquote {
@@ -490,11 +489,11 @@
   content: "";
 }
 
-.markdown-body > *:first-child {
+.markdown-body>*:first-child {
   margin-top: 0 !important;
 }
 
-.markdown-body > *:last-child {
+.markdown-body>*:last-child {
   margin-bottom: 0 !important;
 }
 
@@ -530,11 +529,11 @@
   margin-bottom: 16px;
 }
 
-.markdown-body blockquote > :first-child {
+.markdown-body blockquote> :first-child {
   margin-top: 0;
 }
 
-.markdown-body blockquote > :last-child {
+.markdown-body blockquote> :last-child {
   margin-bottom: 0;
 }
 
@@ -633,7 +632,7 @@
   list-style-type: decimal;
 }
 
-.markdown-body div > ol:not([type]) {
+.markdown-body div>ol:not([type]) {
   list-style-type: decimal;
 }
 
@@ -645,11 +644,11 @@
   margin-bottom: 0;
 }
 
-.markdown-body li > p {
+.markdown-body li>p {
   margin-top: 16px;
 }
 
-.markdown-body li + li {
+.markdown-body li+li {
   margin-top: 0.25em;
 }
 
@@ -712,7 +711,7 @@
   overflow: hidden;
 }
 
-.markdown-body span.frame > span {
+.markdown-body span.frame>span {
   display: block;
   float: left;
   width: auto;
@@ -740,7 +739,7 @@
   clear: both;
 }
 
-.markdown-body span.align-center > span {
+.markdown-body span.align-center>span {
   display: block;
   margin: 13px auto 0;
   overflow: hidden;
@@ -758,7 +757,7 @@
   clear: both;
 }
 
-.markdown-body span.align-right > span {
+.markdown-body span.align-right>span {
   display: block;
   margin: 13px 0 0;
   overflow: hidden;
@@ -788,7 +787,7 @@
   overflow: hidden;
 }
 
-.markdown-body span.float-right > span {
+.markdown-body span.float-right>span {
   display: block;
   margin: 13px auto 0;
   overflow: hidden;
@@ -822,7 +821,7 @@
   font-size: 100%;
 }
 
-.markdown-body pre > code {
+.markdown-body pre>code {
   padding: 0;
   margin: 0;
   word-break: normal;
@@ -1086,7 +1085,7 @@
   cursor: pointer;
 }
 
-.markdown-body .task-list-item + .task-list-item {
+.markdown-body .task-list-item+.task-list-item {
   margin-top: 4px;
 }
 
@@ -1108,9 +1107,7 @@
 }
 
 .markdown-body .contains-task-list:hover .task-list-item-convert-container,
-.markdown-body
+.markdown-body .contains-task-list:focus-within .task-list-item-convert-container {
-  .contains-task-list:focus-within
-  .task-list-item-convert-container {
   display: block;
   width: auto;
   height: 24px;
@@ -1120,4 +1117,4 @@
 
 .markdown-body ::-webkit-calendar-picker-indicator {
   filter: invert(50%);
-}
+}