From 48504e79b94f15ba2d542f30f4c02263a552d7e1 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 13 Jun 2024 11:04:33 +0800
Subject: [PATCH 1/2] fix: layout issues on low-resolution screens

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 console/src/uc/MomentsList.vue    |  2 +-
 console/src/views/MomentsList.vue |  2 +-
 console/tailwind.config.js        | 11 -----------
 3 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/console/src/uc/MomentsList.vue b/console/src/uc/MomentsList.vue
index 7b61307..0d6b926 100644
--- a/console/src/uc/MomentsList.vue
+++ b/console/src/uc/MomentsList.vue
@@ -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-5xl 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
index 91984fd..676c3bf 100644
--- 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-5xl 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
index c097284..75fdef1 100644
--- 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")],
 };

From c0bf0270d3516d4d070b6e563f3af04e779801d1 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 14 Jun 2024 17:16:21 +0800
Subject: [PATCH 2/2] Refine Layout

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 console/src/uc/MomentsList.vue    | 4 ++--
 console/src/views/MomentsList.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/console/src/uc/MomentsList.vue b/console/src/uc/MomentsList.vue
index 0d6b926..6847c51 100644
--- 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-max-w-5xl moments-px-4 md:moments-px-8 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
index 676c3bf..8020c72 100644
--- 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-max-w-5xl moments-px-4 md:moments-px-8 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"
       >