fix: layout issues on low-resolution screens (#112)

* fix: layout issues on low-resolution screens Signed-off-by: Ryan Wang <[email protected]> * Refine Layout Signed-off-by: Ryan Wang <[email protected]> --------- Signed-off-by: Ryan Wang <[email protected]>
halo-sigs · Jun 14, 2024 · 1eb0130 · 1eb0130
1 parent 513a5ed
commit 1eb0130
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 14 deletions.
diff --git a/console/src/uc/MomentsList.vue b/console/src/uc/MomentsList.vue
@@ -11,7 +11,7 @@ import type { User } from "@halo-dev/api-client";
 import type { ListedMoment } from "@/types";
 import { useQuery } from "@tanstack/vue-query";
 import apiClient from "@/utils/api-client";
-import MomentItem from ".//MomentItem.vue";
+import MomentItem from "./MomentItem.vue";
 import DatePicker from "vue-datepicker-next";
 import "vue-datepicker-next/index.css";
 import "vue-datepicker-next/locale/zh-cn.es";
@@ -147,7 +147,7 @@ watch([tag, momentsRangeTime], () => {
     </template>
   </VPageHeader>
   <VCard class="moments-m-0 md:moments-m-4 moments-flex-1">
-    <div class="moments-container moments-mx-auto">
+    <div class="moments-max-w-4xl moments-px-4 md:moments-px-8 moments-mx-auto">
       <div
         class="moments-content moments-my-2 md:moments-my-4 moments-flex moments-flex-col moments-space-y-2"
       >

diff --git a/console/src/views/MomentsList.vue b/console/src/views/MomentsList.vue
@@ -129,7 +129,7 @@ const handleJumpToFrontDesk = () => {
     </template>
   </VPageHeader>
   <VCard class="moments-m-0 md:moments-m-4 moments-flex-1">
-    <div class="moments-container moments-mx-auto">
+    <div class="moments-max-w-4xl moments-px-4 md:moments-px-8 moments-mx-auto">
       <div
         class="moments-content moments-my-2 md:moments-my-4 moments-flex moments-flex-col moments-space-y-2"
       >

diff --git a/console/tailwind.config.js b/console/tailwind.config.js
@@ -2,16 +2,5 @@
 module.exports = {
   prefix: "moments-",
   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
-  theme: {
-    container: {
-      padding: {
-        DEFAULT: "0.5rem",
-        sm: "1.5rem",
-        lg: "4rem",
-        xl: "14rem",
-        "2xl": "22rem",
-      },
-    },
-  },
   plugins: [require("@tailwindcss/aspect-ratio")],
 };