chore: add container-queries tailwind plugin

web/package.json

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

web/pnpm-lock.yaml

@@ -20,6 +20,9 @@ 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.3)
   axios:
     specifier: ^0.27.2
     version: 0.27.2
@@ -1307,6 +1310,14 @@ packages:
     resolution: {integrity: sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==}
     dev: true
 
+  /@tailwindcss/container-queries@0.1.1(tailwindcss@3.3.3):
+    resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
+    peerDependencies:
+      tailwindcss: '>=3.2.0'
+    dependencies:
+      tailwindcss: 3.3.3
+    dev: false
+
   /@trivago/prettier-plugin-sort-imports@3.4.0(prettier@2.6.2):
     resolution: {integrity: sha512-485Iailw8X5f7KetzRka20RF1kPBEINR5LJMNwlBZWY1gRAlVnv5dZzyNPnLxSP0Qcia8HETa9Cdd8LlX9o+pg==}
     peerDependencies:

web/src/components/Header.tsx

@@ -88,13 +88,13 @@ const Header = () => {
       }`}
     >
       <div
-        className={`fixed top-0 left-0 w-full h-full bg-black opacity-0 pointer-events-none transition-opacity duration-300 sm:!hidden ${
+        className={`fixed top-0 left-0 w-full h-full opacity-0 pointer-events-none transition-opacity duration-300 sm:!hidden ${
           showHeader && "opacity-60 pointer-events-auto"
         }`}
         onClick={() => layoutStore.setHeaderStatus(false)}
       ></div>
       <header
-        className={`relative w-56 sm:w-full h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-zinc-100 dark:bg-zinc-800 sm:bg-transparent sm:shadow-none transition-all duration-300 -translate-x-full sm:translate-x-0 ${
+        className={`relative w-56 sm:w-full h-full max-h-screen border-r sm:border-none dark:border-r-zinc-700 overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-zinc-100 dark:bg-zinc-800 sm:bg-transparent sm:shadow-none transition-all duration-300 -translate-x-full sm:translate-x-0 ${
           showHeader && "translate-x-0 shadow-2xl"
         }`}
       >

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 @lg:sticky top-0 left-0 w-full @lg:w-56 h-full shrink-0 pointer-events-none @lg:pointer-events-auto z-10 ${
         showHomeSidebar && "pointer-events-auto"
       }`}
     >
       <div
-        className={`fixed top-0 left-0 w-full h-full bg-black 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 @lg:!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 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 @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 ${
           showHomeSidebar && "!translate-x-0 shadow-2xl"
         }`}
       >

web/src/components/MobileHeader.tsx

@@ -12,7 +12,7 @@ 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 @lg: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"

web/src/pages/Home.tsx

@@ -6,8 +6,8 @@ import MobileHeader from "@/components/MobileHeader";
 
 const Home = () => {
   return (
-    <div className="w-full flex flex-row justify-start items-start">
+    <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 px-4 @lg:max-w-[calc(100%-14rem)] sm:px-2 sm:pt-4">
         <MobileHeader />
         <div className="w-full h-auto flex flex-col justify-start items-start bg-zinc-100 dark:bg-zinc-800 rounded-lg">
           <MemoEditor className="mb-2" cacheKey="home-memo-editor" />

web/tailwind.config.js

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