fix: styles and mobile ux

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"]} ${
-        props.selected && styles["chat-item-selected"]
-      }`}
+      className={`${styles["chat-item"]} ${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",
-              content: "……",
-              date: new Date().toLocaleString(),
-              preview: true,
-            },
-          ]
+          {
+            role: "assistant",
+            content: "……",
+            date: new Date().toLocaleString(),
+            preview: true,
+          },
+        ]
         : []
     )
     .concat(
       userInput.length > 0
         ? [
-            {
-              role: "user",
-              content: userInput,
-              date: new Date().toLocaleString(),
-              preview: true,
-            },
-          ]
+          {
+            role: "user",
+            content: userInput,
+            date: new Date().toLocaleString(),
+            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={`${
-        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>