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);
@@ -184,11 +184,9 @@
   margin-top: 8px;
 }
 
-.chat-item-count {
-}
+.chat-item-count {}
 
-.chat-item-date {
-}
+.chat-item-date {}
 
 .sidebar-tail {
   display: flex;

app/components/home.tsx

@@ -60,8 +60,7 @@ export function ChatItem(props: {
 }) {
   return (
     <div
-      className={`${styles["chat-item"]} ${
-        props.selected && styles["chat-item-selected"]
+      className={`${styles["chat-item"]} ${props.selected && styles["chat-item-selected"]
         }`}
       onClick={props.onClick}
     >
@@ -318,12 +317,12 @@ export function Home() {
 
   return (
     <div
-      className={`${
-        config.tightBorder ? styles["tight-container"] : styles.container
+      className={`${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

@@ -415,7 +415,6 @@
 .markdown-body p {
   margin-top: 0;
   margin-bottom: 10px;
-  overflow: auto;
 }
 
 .markdown-body blockquote {
@@ -1108,9 +1107,7 @@
 }
 
 .markdown-body .contains-task-list:hover .task-list-item-convert-container,
-.markdown-body
-  .contains-task-list:focus-within
-  .task-list-item-convert-container {
+.markdown-body .contains-task-list:focus-within .task-list-item-convert-container {
   display: block;
   width: auto;
   height: 24px;