refactor(web): add 3xl breakpoint

web/src/App.jsx

@@ -27,7 +27,7 @@ export default function App() {
           ) : (
             <div className="flex flex-row min-h-screen w-full bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
               <Sidebar />
-              <div className="w-full flex-auto p-2 mt-20 px-4 min-w-0">
+              <div className="w-full flex-auto p-2 mt-24 px-4 min-w-0">
                 <Router>
                   <CameraMap path="/cameras/:camera/editor" />
                   <Camera path="/cameras/:camera" />

web/src/Cameras.jsx

@@ -16,7 +16,7 @@ export default function Cameras() {
   }
 
   return (
-    <div className="grid lg:grid-cols-2 md:grid-cols-1 gap-4">
+    <div className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
       {Object.keys(config.cameras).map((camera) => (
         <Camera name={camera} />
       ))}

web/tailwind.config.js

@@ -5,6 +5,14 @@ module.exports = {
   darkMode: 'class',
   theme: {
     extend: {},
+    screens: {
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      '2xl': '1536px',
+      '3xl': '1720px',
+    },
   },
   variants: {
     extend: {},