From ba278dfc3d8341d393492d6bfb6cd3847b509810 Mon Sep 17 00:00:00 2001
From: Paul Armstrong <paul@spaceyak.com>
Date: Wed, 3 Feb 2021 15:35:28 -0800
Subject: [PATCH] refactor(web): add 3xl breakpoint

---
 web/src/App.jsx        | 2 +-
 web/src/Cameras.jsx    | 2 +-
 web/tailwind.config.js | 8 ++++++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/src/App.jsx b/web/src/App.jsx
index 95d66c36f..e7e642ac4 100644
--- a/web/src/App.jsx
+++ b/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" />
diff --git a/web/src/Cameras.jsx b/web/src/Cameras.jsx
index 53fd2919d..91f7e4d70 100644
--- a/web/src/Cameras.jsx
+++ b/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} />
       ))}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index da77e7270..fef89b4bd 100644
--- a/web/tailwind.config.js
+++ b/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: {},