chore: tweak max width

1 year ago · 584c669068
parent 46a085f8df
commit 584c669068
16 changed files with 86 additions and 106 deletions
--- a/docs/apidocs.swagger.yaml
+++ b/docs/apidocs.swagger.yaml
@ -2137,7 +2137,8 @@ definitions:

          Note: this functionality is not currently available in the official
          protobuf release, and it is not used for type URLs beginning with
-          type.googleapis.com.
+          type.googleapis.com. As of May 2023, there are no widely used type server
+          implementations and no plans to implement one.

          Schemes other than `http`, `https` (or the empty scheme) might be
          used with implementation specific semantics.
@ -2172,7 +2173,7 @@ definitions:
            foo = any.unpack(Foo.getDefaultInstance());
          }

-      Example 3: Pack and unpack a message in Python.
+       Example 3: Pack and unpack a message in Python.

          foo = Foo(...)
          any = Any()
@ -2182,7 +2183,7 @@ definitions:
            any.Unpack(foo)
            ...

-      Example 4: Pack and unpack a message in Go
+       Example 4: Pack and unpack a message in Go

           foo := &pb.Foo{...}
           any, err := anypb.New(foo)
@ -2202,7 +2203,7 @@ definitions:
      name "y.z".

      JSON
-
+      ====
      The JSON representation of an `Any` value uses the regular
      representation of the deserialized, embedded message, with an
      additional field `@type` which contains the type URL. Example:
--- a/web/package.json
+++ b/web/package.json
@ -13,7 +13,7 @@
    "@github/relative-time-element": "^4.4.0",
    "@matejmazur/react-katex": "^3.1.3",
    "@mui/joy": "5.0.0-beta.36",
-    "@reduxjs/toolkit": "^2.2.3",
+    "@reduxjs/toolkit": "^2.2.4",
    "clsx": "^2.1.1",
    "copy-to-clipboard": "^3.3.3",
    "dayjs": "^1.11.11",
@ -43,7 +43,7 @@
    "@types/dompurify": "^3.0.5",
    "@types/katex": "^0.16.7",
    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.12.10",
+    "@types/node": "^20.12.11",
    "@types/qs": "^6.9.15",
    "@types/react": "^18.3.1",
    "@types/react-dom": "^18.3.0",
@ -64,6 +64,6 @@
    "prettier": "^3.2.5",
    "protobufjs": "^7.2.6",
    "typescript": "^5.4.5",
-    "vite": "^5.2.10"
+    "vite": "^5.2.11"
  }
 }
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@ -24,8 +24,8 @@ importers:
        specifier: 5.0.0-beta.36
        version: 5.0.0-beta.36(@emotion/react@11.11.4(@types/react@18.3.1)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.1)(react@18.3.1))(@types/react@18.3.1)(react@18.3.1))(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
      '@reduxjs/toolkit':
-        specifier: ^2.2.3
-        version: 2.2.3(react-redux@9.1.2(@types/react@18.3.1)(react@18.3.1)(redux@5.0.1))(react@18.3.1)
+        specifier: ^2.2.4
+        version: 2.2.4(react-redux@9.1.2(@types/react@18.3.1)(react@18.3.1)(redux@5.0.1))(react@18.3.1)
      clsx:
        specifier: ^2.1.1
        version: 2.1.1
@ -109,8 +109,8 @@ importers:
        specifier: ^4.17.12
        version: 4.17.12
      '@types/node':
-        specifier: ^20.12.10
-        version: 20.12.10
+        specifier: ^20.12.11
+        version: 20.12.11
      '@types/qs':
        specifier: ^6.9.15
        version: 6.9.15
@ -134,7 +134,7 @@ importers:
        version: 7.8.0(eslint@8.57.0)(typescript@5.4.5)
      '@vitejs/plugin-react':
        specifier: ^4.2.1
-        version: 4.2.1(vite@5.2.11(@types/node@20.12.10)(less@4.2.0))
+        version: 4.2.1(vite@5.2.11(@types/node@20.12.11)(less@4.2.0))
      autoprefixer:
        specifier: ^10.4.19
        version: 10.4.19(postcss@8.4.38)
@ -172,8 +172,8 @@ importers:
        specifier: ^5.4.5
        version: 5.4.5
      vite:
-        specifier: ^5.2.10
-        version: 5.2.11(@types/node@20.12.10)(less@4.2.0)
+        specifier: ^5.2.11
+        version: 5.2.11(@types/node@20.12.11)(less@4.2.0)

 packages:

@ -757,8 +757,8 @@ packages:
  '@protobufjs/utf8@1.1.0':
    resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}

-  '@reduxjs/toolkit@2.2.3':
-    resolution: {integrity: sha512-76dll9EnJXg4EVcI5YNxZA/9hSAmZsFqzMmNRHvIlzw2WS/twfcVX3ysYrWGJMClwEmChQFC4yRq74tn6fdzRA==}
+  '@reduxjs/toolkit@2.2.4':
+    resolution: {integrity: sha512-EoIC9iC2V/DLRBVMXRHrO/oM3QBT7RuJNeBRx8Cpnz/NHINeZBEqgI8YOxAYUjLp+KYxGgc4Wd6KoAKsaUBGhg==}
    peerDependencies:
      react: ^16.9.0 || ^17.0.0 || ^18
      react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
@ -999,8 +999,8 @@ packages:
  '@types/ms@0.7.34':
    resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}

-  '@types/node@20.12.10':
-    resolution: {integrity: sha512-Eem5pH9pmWBHoGAT8Dr5fdc5rYA+4NAovdM4EktRPVAAiJhmWWfQrA0cFhAbOsQdSfIHjAud6YdkbL69+zSKjw==}
+  '@types/node@20.12.11':
+    resolution: {integrity: sha512-vDg9PZ/zi+Nqp6boSOT7plNuthRugEKixDv5sFTIpkE89MmNtEArAShI4mxuX2+UrLEe9pxC1vm2cjm9YlWbJw==}

  '@types/parse-json@4.0.2':
    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
@ -1237,8 +1237,8 @@ packages:
    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
    engines: {node: '>= 6'}

-  caniuse-lite@1.0.30001616:
-    resolution: {integrity: sha512-RHVYKov7IcdNjVHJFNY/78RdG4oGVjbayxv8u5IO74Wv7Hlq4PnJE6mo/OjFijjVFNy5ijnCt6H3IIo4t+wfEw==}
+  caniuse-lite@1.0.30001617:
+    resolution: {integrity: sha512-mLyjzNI9I+Pix8zwcrpxEbGlfqOkF9kM3ptzmKNw5tizSyYwMe+nGLTqMK9cO+0E+Bh6TsBxNAaHWEM8xwSsmA==}

  chalk@2.4.2:
    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
@ -1549,8 +1549,8 @@ packages:
  eastasianwidth@0.2.0:
    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}

-  electron-to-chromium@1.4.756:
-    resolution: {integrity: sha512-RJKZ9+vEBMeiPAvKNWyZjuYyUqMndcP1f335oHqn3BEQbs2NFtVrnK5+6Xg5wSM9TknNNpWghGDUCKGYF+xWXw==}
+  electron-to-chromium@1.4.761:
+    resolution: {integrity: sha512-PIbxpiJGx6Bb8dQaonNc6CGTRlVntdLg/2nMa1YhnrwYOORY9a3ZgGN0UQYE6lAcj/lkyduJN7BPt/JiY+jAQQ==}

  elkjs@0.9.3:
    resolution: {integrity: sha512-f/ZeWvW/BCXbhGEf1Ujp29EASo/lk1FDnETgNKwJrsVvGZhUWCZyg3xLJjAsxfOmt8KjswHmI5EwCQcPMpOYhQ==}
@ -1780,8 +1780,8 @@ packages:
    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
    engines: {node: '>=10.13.0'}

-  glob@10.3.12:
-    resolution: {integrity: sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==}
+  glob@10.3.13:
+    resolution: {integrity: sha512-CQ9K7FRtaP//lXUKJVVYFxvozIz3HR4Brk+yB5VSkmWiHVILwd7NqQ2+UH6Ab5/NzCLib+j1REVV+FSZ+ZHOvg==}
    engines: {node: '>=16 || 14 >=14.17'}
    hasBin: true

@ -2150,10 +2150,6 @@ packages:
  lru-cache@5.1.1:
    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}

-  lru-cache@6.0.0:
-    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
-    engines: {node: '>=10'}
-
  lucide-react@0.378.0:
    resolution: {integrity: sha512-u6EPU8juLUk9ytRcyapkWI18epAv3RU+6+TC23ivjR0e+glWKBobFeSgRwOIJihzktILQuy6E0E80P2jVTDR5g==}
    peerDependencies:
@ -2258,8 +2254,8 @@ packages:
    resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==}
    engines: {node: '>=16 || 14 >=14.17'}

-  minipass@7.1.0:
-    resolution: {integrity: sha512-oGZRv2OT1lO2UF1zUcwdTb3wqUwI0kBGTgt/T7OdSj6M6N5m3o5uPf0AIW6lVxGGoiWUR7e2AwTE+xiwK8WQig==}
+  minipass@7.1.1:
+    resolution: {integrity: sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==}
    engines: {node: '>=16 || 14 >=14.17'}

  mri@1.2.0:
@ -2388,8 +2384,8 @@ packages:
  path-parse@1.0.7:
    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}

-  path-scurry@1.10.2:
-    resolution: {integrity: sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==}
+  path-scurry@1.10.4:
+    resolution: {integrity: sha512-nYo46tkNDCe4Ti+K4WP/ns2BjywqQMAeAz7r3lqtVkh8A0L9F86Ju2nLIrzFMUDSs1X0lHivbCiKG4eRUK2Z2Q==}
    engines: {node: '>=16 || 14 >=14.17'}

  path-type@4.0.0:
@ -2668,8 +2664,8 @@ packages:
    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
    hasBin: true

-  semver@7.6.0:
-    resolution: {integrity: sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==}
+  semver@7.6.1:
+    resolution: {integrity: sha512-f/vbBsu+fOiYt+lmwZV0rVwJScl46HppnOA1ZvIuBWKOTlllpyJ3bfVax76/OrhCH38dyxoDIA8K7uB963IYgA==}
    engines: {node: '>=10'}
    hasBin: true

@ -3004,9 +3000,6 @@ packages:
  yallist@3.1.1:
    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}

-  yallist@4.0.0:
-    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
-
  yaml@1.10.2:
    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
    engines: {node: '>= 6'}
@ -3597,7 +3590,7 @@ snapshots:

  '@protobufjs/utf8@1.1.0': {}

-  '@reduxjs/toolkit@2.2.3(react-redux@9.1.2(@types/react@18.3.1)(react@18.3.1)(redux@5.0.1))(react@18.3.1)':
+  '@reduxjs/toolkit@2.2.4(react-redux@9.1.2(@types/react@18.3.1)(react@18.3.1)(redux@5.0.1))(react@18.3.1)':
    dependencies:
      immer: 10.1.1
      redux: 5.0.1
@ -3837,7 +3830,7 @@ snapshots:

  '@types/ms@0.7.34': {}

-  '@types/node@20.12.10':
+  '@types/node@20.12.11':
    dependencies:
      undici-types: 5.26.5

@ -3881,7 +3874,7 @@ snapshots:
      graphemer: 1.4.0
      ignore: 5.3.1
      natural-compare: 1.4.0
-      semver: 7.6.0
+      semver: 7.6.1
      ts-api-utils: 1.3.0(typescript@5.4.5)
    optionalDependencies:
      typescript: 5.4.5
@ -3928,7 +3921,7 @@ snapshots:
      globby: 11.1.0
      is-glob: 4.0.3
      minimatch: 9.0.4
-      semver: 7.6.0
+      semver: 7.6.1
      ts-api-utils: 1.3.0(typescript@5.4.5)
    optionalDependencies:
      typescript: 5.4.5
@ -3944,7 +3937,7 @@ snapshots:
      '@typescript-eslint/types': 7.8.0
      '@typescript-eslint/typescript-estree': 7.8.0(typescript@5.4.5)
      eslint: 8.57.0
-      semver: 7.6.0
+      semver: 7.6.1
    transitivePeerDependencies:
      - supports-color
      - typescript
@ -3956,14 +3949,14 @@ snapshots:

  '@ungap/structured-clone@1.2.0': {}

-  '@vitejs/plugin-react@4.2.1(vite@5.2.11(@types/node@20.12.10)(less@4.2.0))':
+  '@vitejs/plugin-react@4.2.1(vite@5.2.11(@types/node@20.12.11)(less@4.2.0))':
    dependencies:
      '@babel/core': 7.24.5
      '@babel/plugin-transform-react-jsx-self': 7.24.5(@babel/core@7.24.5)
      '@babel/plugin-transform-react-jsx-source': 7.24.1(@babel/core@7.24.5)
      '@types/babel__core': 7.20.5
      react-refresh: 0.14.2
-      vite: 5.2.11(@types/node@20.12.10)(less@4.2.0)
+      vite: 5.2.11(@types/node@20.12.11)(less@4.2.0)
    transitivePeerDependencies:
      - supports-color

@ -4077,7 +4070,7 @@ snapshots:
  autoprefixer@10.4.19(postcss@8.4.38):
    dependencies:
      browserslist: 4.23.0
-      caniuse-lite: 1.0.30001616
+      caniuse-lite: 1.0.30001617
      fraction.js: 4.3.7
      normalize-range: 0.1.2
      picocolors: 1.0.0
@ -4113,8 +4106,8 @@ snapshots:

  browserslist@4.23.0:
    dependencies:
-      caniuse-lite: 1.0.30001616
-      electron-to-chromium: 1.4.756
+      caniuse-lite: 1.0.30001617
+      electron-to-chromium: 1.4.761
      node-releases: 2.0.14
      update-browserslist-db: 1.0.15(browserslist@4.23.0)

@ -4130,7 +4123,7 @@ snapshots:

  camelcase-css@2.0.1: {}

-  caniuse-lite@1.0.30001616: {}
+  caniuse-lite@1.0.30001617: {}

  chalk@2.4.2:
    dependencies:
@ -4471,7 +4464,7 @@ snapshots:

  eastasianwidth@0.2.0: {}

-  electron-to-chromium@1.4.756: {}
+  electron-to-chromium@1.4.761: {}

  elkjs@0.9.3: {}

@ -4821,13 +4814,13 @@ snapshots:
    dependencies:
      is-glob: 4.0.3

-  glob@10.3.12:
+  glob@10.3.13:
    dependencies:
      foreground-child: 3.1.1
      jackspeak: 2.3.6
      minimatch: 9.0.4
-      minipass: 7.1.0
-      path-scurry: 1.10.2
+      minipass: 7.1.1
+      path-scurry: 1.10.4

  glob@7.2.3:
    dependencies:
@ -5167,10 +5160,6 @@ snapshots:
    dependencies:
      yallist: 3.1.1

-  lru-cache@6.0.0:
-    dependencies:
-      yallist: 4.0.0
-
  lucide-react@0.378.0(react@18.3.1):
    dependencies:
      react: 18.3.1
@ -5380,7 +5369,7 @@ snapshots:
    dependencies:
      brace-expansion: 2.0.1

-  minipass@7.1.0: {}
+  minipass@7.1.1: {}

  mri@1.2.0: {}

@ -5518,10 +5507,10 @@ snapshots:

  path-parse@1.0.7: {}

-  path-scurry@1.10.2:
+  path-scurry@1.10.4:
    dependencies:
      lru-cache: 10.2.2
-      minipass: 7.1.0
+      minipass: 7.1.1

  path-type@4.0.0: {}

@ -5601,7 +5590,7 @@ snapshots:
      '@protobufjs/path': 1.1.2
      '@protobufjs/pool': 1.1.0
      '@protobufjs/utf8': 1.1.0
-      '@types/node': 20.12.10
+      '@types/node': 20.12.11
      long: 5.2.3

  prr@1.0.1:
@ -5813,9 +5802,7 @@ snapshots:

  semver@6.3.1: {}

-  semver@7.6.0:
-    dependencies:
-      lru-cache: 6.0.0
+  semver@7.6.1: {}

  set-function-length@1.2.2:
    dependencies:
@ -5941,7 +5928,7 @@ snapshots:
    dependencies:
      '@jridgewell/gen-mapping': 0.3.5
      commander: 4.1.1
-      glob: 10.3.12
+      glob: 10.3.13
      lines-and-columns: 1.2.4
      mz: 2.7.0
      pirates: 4.0.6
@ -6107,13 +6094,13 @@ snapshots:
      kleur: 4.1.5
      sade: 1.8.1

-  vite@5.2.11(@types/node@20.12.10)(less@4.2.0):
+  vite@5.2.11(@types/node@20.12.11)(less@4.2.0):
    dependencies:
      esbuild: 0.20.2
      postcss: 8.4.38
      rollup: 4.17.2
    optionalDependencies:
-      '@types/node': 20.12.10
+      '@types/node': 20.12.11
      fsevents: 2.3.3
      less: 4.2.0

@ -6183,8 +6170,6 @@ snapshots:

  yallist@3.1.1: {}

-  yallist@4.0.0: {}
-
  yaml@1.10.2: {}

  yaml@2.4.2: {}
--- a/web/src/components/MemoContent/CodeBlock.tsx
+++ b/web/src/components/MemoContent/CodeBlock.tsx
@ -1,11 +1,8 @@
-import { Checkbox } from "@mui/joy";
 import clsx from "clsx";
 import copy from "copy-to-clipboard";
 import hljs from "highlight.js";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 import toast from "react-hot-toast";
-import useResponsiveWidth from "@/hooks/useResponsiveWidth";
-import { useTranslate } from "@/utils/i18n";
 import Icon from "../Icon";
 import MermaidBlock from "./MermaidBlock";
 import { BaseProps } from "./types";
@ -31,12 +28,6 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
    return <MermaidBlock content={content} />;
  }

-  const { md } = useResponsiveWidth();
-  const t = useTranslate();
-
-  const [wrap, setWrap] = useState(true);
-  const handleWrapChange = useCallback(() => setWrap(!wrap), [setWrap, wrap]);
-
  const highlightedCode: string = useMemo(() => {
    try {
      const lang = hljs.getLanguage(formatedLanguage);
@ -61,25 +52,17 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
    <div className="w-full my-1 bg-amber-100 border-l-4 border-amber-400 rounded hover:shadow dark:bg-zinc-600 dark:border-zinc-400 relative">
      <div className="w-full px-2 py-1 flex flex-row justify-between items-center text-amber-500 dark:text-zinc-400">
        <span className="text-sm font-mono">{formatedLanguage}</span>
-        {md && <Icon.Copy className="w-4 h-auto cursor-pointer hover:opacity-80" onClick={handleCopyButtonClick} />}
+        <Icon.Copy className="w-4 h-auto cursor-pointer hover:opacity-80" onClick={handleCopyButtonClick} />
      </div>

      <div className="overflow-auto">
-        <pre className={clsx(wrap ? "whitespace-pre-wrap" : "no-wrap overflow-auto", "w-full p-2 bg-amber-50 dark:bg-zinc-700 relative")}>
+        <pre className={clsx("no-wrap overflow-auto", "w-full p-2 bg-amber-50 dark:bg-zinc-700 relative")}>
          <code
            className={clsx(`language-${formatedLanguage}`, "block text-sm leading-5")}
            dangerouslySetInnerHTML={{ __html: highlightedCode }}
          ></code>
        </pre>
      </div>
-      {!md && (
-        <div className="sticky flex px-2 h-8 bottom-0 bg-amber-100 dark:bg-zinc-600 rounded items-center">
-          <div className="grow h-full">
-            <Checkbox className="h-full items-center" label={t("memo.wrapping")} size="sm" checked={wrap} onChange={handleWrapChange} />
-          </div>
-          <Icon.Copy className="w-4 h-full cursor-pointer hover:opacity-80" onClick={handleCopyButtonClick} />
-        </div>
-      )}
    </div>
  );
 };
--- a/web/src/pages/About.tsx
+++ b/web/src/pages/About.tsx
@ -4,7 +4,7 @@ import MobileHeader from "@/components/MobileHeader";

 const About = () => {
  return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
      <MobileHeader />
      <div className="w-full px-4 sm:px-6">
        <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
--- a/web/src/pages/Archived.tsx
+++ b/web/src/pages/Archived.tsx
@ -90,12 +90,16 @@ const Archived = () => {
  };

  return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
      <MobileHeader />
      <div className="w-full px-4 sm:px-6">
        <div className="w-full flex flex-col justify-start items-start">
-          <div className="w-full flex flex-row justify-end items-center mb-2">
-            <div className="w-40">
+          <div className="w-full flex flex-row justify-between items-center mb-2">
+            <div className="flex flex-row justify-start items-center gap-1">
+              <Icon.Archive className="w-5 h-auto opacity-70 shrink-0" />
+              <span className="font-medium">{t("common.archived")}</span>
+            </div>
+            <div className="w-44">
              <SearchBar />
            </div>
          </div>
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@ -58,7 +58,7 @@ const Explore = () => {
  };

  return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
      {!md && (
        <MobileHeader>
          <ExploreSidebarDrawer />
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@ -72,7 +72,7 @@ const Home = () => {
  }, [memoList]);

  return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
      {!md && (
        <MobileHeader>
          <HomeSidebarDrawer />
--- a/web/src/pages/Inboxes.tsx
+++ b/web/src/pages/Inboxes.tsx
@ -23,7 +23,7 @@ const Inboxes = () => {
  }, []);

  return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
      <MobileHeader />
      <div className="w-full px-4 sm:px-6">
        <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
--- a/web/src/pages/MemoDetail.tsx
+++ b/web/src/pages/MemoDetail.tsx
@ -75,7 +75,7 @@ const MemoDetail = () => {
  };

  return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
      <MobileHeader />
      <div className="w-full px-4 sm:px-6">
        {parentMemo && (
@ -110,10 +110,10 @@ const MemoDetail = () => {
                  <Button
                    variant="plain"
                    color="neutral"
-                    startDecorator={<Icon.MessageCircle className="w-5 h-auto text-gray-400" />}
+                    endDecorator={<Icon.MessageCircle className="w-5 h-auto text-gray-400" />}
                    onClick={handleShowCommentEditor}
                  >
-                    <span className="">{t("memo.comment.write-a-comment")}</span>
+                    <span className="font-normal">{t("memo.comment.write-a-comment")}</span>
                  </Button>
                </div>
              )
--- a/web/src/pages/NotFound.tsx
+++ b/web/src/pages/NotFound.tsx
@ -2,7 +2,7 @@ import MobileHeader from "@/components/MobileHeader";

 const NotFound = () => {
  return (
-    <section className="@container w-full max-w-4xl min-h-[100svh] flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-5xl min-h-[100svh] flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
      <MobileHeader />
      <div className="w-full px-4 grow flex flex-col justify-center items-center sm:px-6">
        <p className="font-medium">{"The page you are looking for can't be found."}</p>
--- a/web/src/pages/PermissionDenied.tsx
+++ b/web/src/pages/PermissionDenied.tsx
@ -2,7 +2,7 @@ import MobileHeader from "@/components/MobileHeader";

 const PermissionDenied = () => {
  return (
-    <section className="@container w-full max-w-4xl min-h-[100svh] flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-5xl min-h-[100svh] flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
      <MobileHeader />
      <div className="w-full px-4 grow flex flex-col justify-center items-center sm:px-6">
        <p className="font-medium">Permission denied</p>
--- a/web/src/pages/Resources.tsx
+++ b/web/src/pages/Resources.tsx
@ -74,7 +74,7 @@ const Resources = () => {
  };

  return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
      <MobileHeader />
      <div className="w-full px-4 sm:px-6">
        <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
--- a/web/src/pages/Setting.tsx
+++ b/web/src/pages/Setting.tsx
@ -57,7 +57,7 @@ const Setting = () => {
  }, []);

  return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-start sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-start sm:pt-3 md:pt-6 pb-8">
      <MobileHeader />
      <div className="w-full px-4 sm:px-6">
        <div className="w-full shadow flex flex-row justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-gray-600 dark:text-gray-400">
--- a/web/src/pages/Timeline.tsx
+++ b/web/src/pages/Timeline.tsx
@ -100,12 +100,18 @@ const Timeline = () => {
    return nextPageToken;
  };

+  const handleSelectedDataChange = (date: string) => {
+    if (dayjs(date).isValid()) {
+      setSelectedDateString(new Date(date).toDateString());
+    }
+  };
+
  const handleNewMemo = () => {
    showMemoEditorDialog({});
  };

  return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
      {!md && (
        <MobileHeader>
          <TimelineSidebarDrawer />
@ -141,9 +147,10 @@ const Timeline = () => {
                      <input
                        className="inset-0 absolute z-1 opacity-0"
                        type="date"
-                        defaultValue={dayjs(selectedDateString).format("YYYY-MM-DD")}
+                        max={dayjs().format("YYYY-MM-DD")}
+                        value={dayjs(selectedDateString).format("YYYY-MM-DD")}
                        onFocus={(e) => e.target.showPicker()}
-                        onChange={(e) => setSelectedDateString(e.target.value)}
+                        onChange={(e) => handleSelectedDataChange(e.target.value)}
                      />
                    </div>
                    <span className="opacity-60 text-lg">{dayjs(monthString).year()}</span>
--- a/web/src/pages/UserProfile.tsx
+++ b/web/src/pages/UserProfile.tsx
@ -103,7 +103,7 @@ const UserProfile = () => {
  };

  return (
-    <section className="w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
      <MobileHeader />
      <div className="w-full px-4 sm:px-6 flex flex-col justify-start items-center">
        {!loadingState.isLoading &&