chore: update page max width

frontend/web/src/components/CreateShortcutDialog.tsx

@@ -263,7 +263,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
               {t(`shortcut.visibility.${state.shortcutCreate.visibility.toLowerCase()}.description`)}
             </p>
           </div>
-          <Divider className="text-gray-500">Optional</Divider>
+          <Divider className="text-gray-500">More</Divider>
           <div className="w-full flex flex-col justify-start items-start border rounded-md overflow-hidden my-3 dark:border-zinc-800">
             <div
               className={classnames(

frontend/web/src/components/DemoBanner.tsx

@@ -9,7 +9,7 @@ const DemoBanner: React.FC = () => {
 
   return (
     <div className="z-10 relative flex flex-row items-center justify-center w-full py-2 text-sm sm:text-lg font-medium dark:text-gray-300 bg-white dark:bg-zinc-700 shadow">
-      <div className="w-full max-w-6xl px-4 md:px-12 flex flex-row justify-between items-center gap-x-3">
+      <div className="w-full max-w-8xl px-4 md:px-12 flex flex-row justify-between items-center gap-x-3">
         <span>✨🔗 Slash - An open source, self-hosted bookmarks and link sharing platform</span>
         <a
           className="shadow flex flex-row justify-center items-center px-2 py-1 rounded-md text-sm sm:text-base text-white bg-blue-600 hover:bg-blue-700"

frontend/web/src/components/Header.tsx

@@ -26,7 +26,7 @@ const Header: React.FC = () => {
   return (
     <>
       <div className="w-full bg-gray-50 dark:bg-zinc-900 border-b border-b-gray-200 dark:border-b-zinc-800">
-        <div className="w-full max-w-6xl mx-auto px-3 md:px-12 py-5 flex flex-row justify-between items-center">
+        <div className="w-full max-w-8xl mx-auto px-3 md:px-12 py-5 flex flex-row justify-between items-center">
           <div className="flex flex-row justify-start items-center shrink mr-2">
             <Link to="/" className="text-lg cursor-pointer flex flex-row justify-start items-center dark:text-gray-400">
               <img id="logo-img" src="/logo.png" className="w-8 h-auto mr-2 -mt-0.5 dark:opacity-80 rounded-full shadow" alt="" />

frontend/web/src/components/ShortcutsContainer.tsx

@@ -17,7 +17,7 @@ const ShortcutsContainer: React.FC<Props> = (props: Props) => {
     <div
       className={classNames(
         "w-full grid grid-cols-1 gap-3 sm:gap-4",
-        displayStyle === "full" ? "sm:grid-cols-2 lg:grid-cols-3" : "grid-cols-2 sm:grid-cols-4"
+        displayStyle === "full" ? "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4" : "grid-cols-2 sm:grid-cols-4"
       )}
     >
       {shortcutList.map((shortcut) => {

frontend/web/src/pages/Home.tsx

@@ -45,7 +45,7 @@ const Home: React.FC = () => {
 
   return (
     <>
-      <div className="mx-auto max-w-6xl w-full px-3 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
+      <div className="mx-auto max-w-8xl w-full px-3 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
         <Navigator />
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <div className="flex flex-row justify-start items-center">

frontend/web/src/pages/ShortcutDetail.tsx

@@ -56,7 +56,7 @@ const ShortcutDetail = () => {
 
   return (
     <>
-      <div className="mx-auto max-w-6xl w-full px-3 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
+      <div className="mx-auto max-w-8xl w-full px-3 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
         <div className="mt-8 w-12 h-12 flex justify-center items-center overflow-clip">
           {favicon ? (
             <img className="w-full h-auto rounded-full" src={favicon} decoding="async" loading="lazy" />

frontend/web/src/pages/SubscriptionSetting.tsx

@@ -37,7 +37,7 @@ const SubscriptionSetting: React.FC = () => {
   };
 
   return (
-    <div className="mx-auto max-w-6xl w-full px-3 md:px-12 pt-8 pb-24 flex flex-col justify-start items-start gap-y-12">
+    <div className="mx-auto max-w-8xl w-full px-3 md:px-12 pt-8 pb-24 flex flex-col justify-start items-start gap-y-12">
       <div className="w-full">
         <p className="text-base font-semibold leading-6 text-gray-900 dark:text-gray-500">Subscription</p>
         <div className="mt-2">

frontend/web/src/pages/UserSetting.tsx

@@ -4,7 +4,7 @@ import AccountSection from "../components/setting/AccountSection";
 
 const Setting: React.FC = () => {
   return (
-    <div className="mx-auto max-w-6xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start gap-y-12">
+    <div className="mx-auto max-w-8xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start gap-y-12">
       <AccountSection />
       <AccessTokenSection />
       <PreferenceSection />

frontend/web/src/pages/WorkspaceSetting.tsx

@@ -25,7 +25,7 @@ const WorkspaceSetting: React.FC = () => {
   }
 
   return (
-    <div className="mx-auto max-w-6xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start gap-y-12">
+    <div className="mx-auto max-w-8xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start gap-y-12">
       <Alert variant="soft" color="warning" startDecorator={<Icon.Info />}>
         You can see the settings items below because you are an Admin.
       </Alert>

frontend/web/tailwind.config.js

@@ -3,6 +3,9 @@ module.exports = {
   content: ["./index.html", "./src/**/*.{js,ts,tsx}"],
   darkMode: "class",
   theme: {
+    maxWidth: {
+      "8xl": "88rem",
+    },
     fontSize: {
       xs: ".75rem",
       sm: ".875rem",