chore: update response styles

web/package.json

@@ -15,7 +15,6 @@
     "@matejmazur/react-katex": "^3.1.3",
     "@mui/joy": "5.0.0-beta.13",
     "@reduxjs/toolkit": "^1.9.7",
-    "@tailwindcss/container-queries": "^0.1.1",
     "axios": "^1.6.0",
     "classnames": "^2.3.2",
     "copy-to-clipboard": "^3.3.3",

web/pnpm-lock.yaml

@@ -20,9 +20,6 @@ dependencies:
   '@reduxjs/toolkit':
     specifier: ^1.9.7
     version: 1.9.7(react-redux@8.1.3)(react@18.2.0)
-  '@tailwindcss/container-queries':
-    specifier: ^0.1.1
-    version: 0.1.1(tailwindcss@3.3.5)
   axios:
     specifier: ^1.6.0
     version: 1.6.0
@@ -1301,14 +1298,6 @@ packages:
     resolution: {integrity: sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==}
     dev: true
 
-  /@tailwindcss/container-queries@0.1.1(tailwindcss@3.3.5):
-    resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
-    peerDependencies:
-      tailwindcss: '>=3.2.0'
-    dependencies:
-      tailwindcss: 3.3.5
-    dev: false
-
   /@trivago/prettier-plugin-sort-imports@3.4.0(prettier@2.6.2):
     resolution: {integrity: sha512-485Iailw8X5f7KetzRka20RF1kPBEINR5LJMNwlBZWY1gRAlVnv5dZzyNPnLxSP0Qcia8HETa9Cdd8LlX9o+pg==}
     peerDependencies:

web/src/components/HeaderDrawer.tsx

@@ -21,7 +21,7 @@ const HeaderDrawer = () => {
   };
 
   return (
-    <div>
+    <div className="sm:hidden">
       <IconButton onClick={toggleDrawer(true)}>
         <Icon.Menu className="w-5 h-auto dark:text-gray-200" />
       </IconButton>

web/src/components/HomeSidebar.tsx

@@ -9,18 +9,18 @@ const HomeSidebar = () => {
 
   return (
     <div
-      className={`fixed @lg:sticky top-0 left-0 w-full @lg:w-56 h-full shrink-0 pointer-events-none @lg:pointer-events-auto z-10 ${
+      className={`fixed md:sticky top-0 left-0 w-full md:w-56 h-full shrink-0 pointer-events-none md:pointer-events-auto z-10 ${
         showHomeSidebar && "pointer-events-auto"
       }`}
     >
       <div
-        className={`fixed top-0 left-0 w-full h-full opacity-0 pointer-events-none transition-opacity duration-300 @lg:!hidden ${
+        className={`fixed top-0 left-0 w-full h-full opacity-0 pointer-events-none transition-opacity duration-300 md:!hidden ${
           showHomeSidebar && "opacity-60 pointer-events-auto"
         }`}
         onClick={() => layoutStore.setHomeSidebarStatus(false)}
       ></div>
       <aside
-        className={`absolute @lg:relative top-0 right-0 w-56 pr-2 @lg:w-full h-full max-h-screen border-l sm:border-none dark:border-l-zinc-700 overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-zinc-100 dark:bg-zinc-800 @lg:bg-transparent @lg:shadow-none transition-all duration-300 translate-x-full @lg:translate-x-0 ${
+        className={`absolute md:relative top-0 right-0 w-56 pr-2 md:w-full h-full max-h-screen border-l sm:border-none dark:border-l-zinc-700 overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-zinc-100 dark:bg-zinc-800 md:bg-transparent md:shadow-none transition-all duration-300 translate-x-full md:translate-x-0 ${
           showHomeSidebar && "!translate-x-0 shadow-2xl"
         }`}
       >

web/src/components/MobileHeader.tsx

@@ -13,14 +13,8 @@ const MobileHeader = (props: Props) => {
   const [titleText] = useState("MEMOS");
 
   return (
-    <div className="sticky top-0 pt-4 sm:pt-1 pb-1 mb-1 backdrop-blur bg-zinc-100 dark:bg-zinc-800 bg-opacity-70 flex @lg:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2">
+    <div className="sticky top-0 pt-4 sm:pt-1 pb-1 mb-1 backdrop-blur bg-zinc-100 dark:bg-zinc-800 bg-opacity-70 flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2">
       <div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">
-        {/* <div
-          className="flex sm:hidden flex-row justify-center items-center w-6 h-6 mr-1 shrink-0 bg-transparent"
-          onClick={() => layoutStore.setHeaderStatus(true)}
-        >
-          <Icon.Menu className="w-5 h-auto dark:text-gray-200" />
-        </div> */}
         <HeaderDrawer />
         <span
           className="font-bold text-lg leading-10 mr-1 text-ellipsis shrink-0 cursor-pointer overflow-hidden text-gray-700 dark:text-gray-200"

web/src/pages/Home.tsx

@@ -5,8 +5,8 @@ import MobileHeader from "@/components/MobileHeader";
 
 const Home = () => {
   return (
-    <div className="@container w-full flex flex-row justify-start items-start">
-      <div className="w-full px-4 @lg:max-w-[calc(100%-14rem)] sm:px-2 sm:pt-4">
+    <div className="w-full flex flex-row justify-start items-start">
+      <div className="w-full px-4 md:max-w-[calc(100%-14rem)] sm:px-2 sm:pt-4">
         <MobileHeader />
         <MemoEditor className="mb-2" cacheKey="home-memo-editor" />
         <MemoList />

web/tailwind.config.js

@@ -34,5 +34,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require("@tailwindcss/container-queries")],
+  plugins: [],
 };