browser adapter: using margin instead of gap to avoid browser compatibility issues

app/src/assets/editor.less

@@ -85,9 +85,10 @@
 }
 
 .editor-toolbar {
-  display: flex;
-  flex-direction: row;
+  display: grid;
+  grid-auto-flow: column;
   align-items: flex-end;
   gap: 4px;
-  margin: 4px 0;
+  width: max-content;
+  margin: 4px 0 4px auto;
 }

app/src/assets/generation.less

@@ -44,7 +44,6 @@
     align-items: center;
     flex-grow: 1;
     padding: 15vh 0;
-    gap: 2rem;
 
     .box {
       display: flex;
@@ -148,7 +147,7 @@
   display: flex;
   flex-direction: row;
   width: 80%;
-  margin: 0 auto;
+  margin: 2rem auto;
   max-width: 680px;
 
   .input {

app/src/assets/home.less

@@ -254,7 +254,15 @@
     touch-action: pan-y;
     padding: 18px;
     scrollbar-width: thin;
-    gap: 8px;
+
+    // using margin instead of gap to avoid browser compatibility issues
+    & > * {
+      margin-bottom: 8px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
 
     &::-webkit-scrollbar {
       width: 6px;
@@ -325,7 +333,7 @@
     }
 
     .input-options {
-      margin: 16px auto 2px;
+      margin: 6px auto 2px;
       display: flex;
       flex-direction: row;
       align-items: center;

app/src/assets/navbar.less

@@ -17,7 +17,14 @@
     flex-direction: row;
     align-content: center;
     vertical-align: center;
-    gap: 10px;
+
+    & > * {
+      margin-right: 8px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
   }
 
   .logo {

app/src/routes/Quota.tsx

@@ -319,7 +319,7 @@ function Quota() {
               <div className={`tip`}>
                 <p>{t("buy.tip")}</p>
                 <Button variant={`outline`} asChild>
-                  <a href={`https://openai.com/pricing`} target={`_blank`}>
+                  <a href={`https://docs.chatnio.net`} target={`_blank`}>
                     <ExternalLink className={`h-4 w-4 mr-2`} />
                     {t("buy.learn-more")}
                   </a>