feat: update quota amount wrapper style

app/src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "chatnio",
-    "version": "3.10.6"
+    "version": "3.10.7"
   },
   "tauri": {
     "allowlist": {

app/src/assets/pages/quota.less

@@ -9,19 +9,13 @@
   padding: 16px 0;
   gap: 36px;
 
-  @media (max-width: 820px) {
-    & {
-      width: min-content;
-      margin: 0 auto;
-    }
-  }
-
   .interface-item {
     display: flex;
     flex-direction: column;
     gap: 6px;
+    width: 100%;
     max-width: calc(90vw - 3rem);
-    margin: 0.5rem auto;
+    margin: 0.5rem;
   }
 }
 
@@ -36,15 +30,14 @@
 }
 
 .quota-dialog {
-  max-width: min(90vw, 844px) !important;
+  max-width: min(90vw, 680px) !important;
 }
 
 .amount-container {
   display: flex;
   flex-direction: column;
   gap: 24px;
-  width: max-content;
-  max-width: 100%;
+  width: 100%;
   align-items: center;
 }
 
@@ -99,17 +92,26 @@
 }
 
 .amount-wrapper {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  display: grid;
   margin-top: 24px;
   gap: 12px;
   justify-content: center;
+  width: 100%;
+
+  grid-template-columns: 1fr 1fr 1fr;
+
+  @media (max-width: 560px) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @media (max-width: 460px) {
+    grid-template-columns: 1fr;
+  }
 
   .amount {
     position: relative;
     display: flex;
-    padding: 12px 32px;
+    padding: 0.75rem 0.75rem;
     flex-direction: column;
     align-items: center;
     justify-content: center;
@@ -119,36 +121,19 @@
     user-select: none;
     cursor: pointer;
     gap: 6px;
-    min-width: 100px;
+    min-width: 7.5rem;
+    width: 100%;
     transition: .1s linear;
-
-    @media (max-width: 360px) {
-      & {
-        width: 100%;
-      }
-
-      &.active {
-        scale: 1 !important;
-        border-color: hsl(var(--text-secondary)) !important;
-      }
-
-      .amount-title {
-        font-size: 16px !important;
-      }
-    }
+    text-align: center;
 
     &.active {
-      border-color: hsl(var(--border-hover));
-      scale: 1.05;
+      background: hsl(var(--input));
+      border-color: hsl(var(--text-secondary));
 
       .amount-desc,
       .other {
         color: hsl(var(--text));
       }
-
-      .amount-title {
-        font-size: 17px;
-      }
     }
 
     .amount-title {

app/src/components/ui/dialog.tsx

@@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[90vw] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[90vw] md:max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
         className,
       )}
       {...props}

app/src/conf/bootstrap.ts

@@ -7,7 +7,7 @@ import {
 import { syncSiteInfo } from "@/admin/api/info.ts";
 import { setAxiosConfig } from "@/conf/api.ts";
 
-export const version = "3.10.6"; // version of the current build
+export const version = "3.10.7"; // version of the current build
 export const dev: boolean = getDev(); // is in development mode (for debugging, in localhost origin)
 export const deploy: boolean = true; // is production environment (for api endpoint)
 export const tokenField = getTokenField(deploy); // token field name for storing token

app/src/dialogs/InvitationDialog.tsx

@@ -37,7 +37,7 @@ function InvitationDialog() {
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>
-          <Button variant={`outline`} onClick={() => dispatch(closeDialog())}>
+          <Button className={`mt-2 sm:mt-0`} variant={`outline`} onClick={() => dispatch(closeDialog())}>
             {t("invitation.cancel")}
           </Button>
           <Button

app/src/dialogs/QuotaDialog.tsx

@@ -334,7 +334,7 @@ function QuotaDialog() {
                 </div>
               </div>
               <div
-                className={`tip flex-row items-center justify-center mt-8 mb-4`}
+                className={`tip flex-row items-center justify-center mt-4 mb-4`}
               >
                 {buyLink && buyLink.length > 0 && (
                   <Button asChild>