From e81fd750564fdca28eb978dc6043f5c4ebe8a0ee Mon Sep 17 00:00:00 2001
From: Jordan <j.luse7@gmail.com>
Date: Fri, 16 Aug 2024 11:33:19 -0700
Subject: [PATCH] Added custom screen size in tailwind.config.js to account for
 header links breakpoints

---
 src/components/header.tsx |  4 ++--
 tailwind.config.js        | 23 ++++++++++++-----------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index 94358d84c828a..bbf9d5defe174 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -55,7 +55,7 @@ export function Header({pathname, searchPlatforms, noSearch}: Props) {
             <Search path={pathname} searchPlatforms={searchPlatforms} showChatBot />
           </div>
         )}
-        <div className="hidden lg:flex justify-end flex-1 space-x-2 items-center">
+        <div className="hidden lg-xl:flex justify-end flex-1 space-x-2 items-center">
           <NavLink href="https://sentry.io/changelog/">Changelog</NavLink>
           <NavLink href="https://try.sentry-demo.com/demo/start/">Sandbox</NavLink>
           <NavLink href="https://sentry.io/">Sign In</NavLink>
@@ -66,7 +66,7 @@ export function Header({pathname, searchPlatforms, noSearch}: Props) {
             Get Started
           </NavLink>
         </div>
-        <div className="lg:hidden ml-auto">
+        <div className="lg-xl:hidden ml-auto">
           <MobileMenu pathname={pathname} searchPlatforms={searchPlatforms} />
         </div>
       </nav>
diff --git a/tailwind.config.js b/tailwind.config.js
index 33ee17bc8a695..c002ef9a550a1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,15 +1,13 @@
 const defaultTheme = require('tailwindcss/defaultTheme');
+
 import {
-  scopedPreflightStyles,
   isolateInsideOfContainer,
+  scopedPreflightStyles,
 } from 'tailwindcss-scoped-preflight';
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    './app/**/*.{js,ts,jsx,tsx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
+  content: ['./app/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
     extend: {
       animation: {
@@ -22,16 +20,16 @@ module.exports = {
       },
       keyframes: () => ({
         fadeIn: {
-          '0%': { opacity: 0 },
-          '100%': { opacity: 1 },
+          '0%': {opacity: 0},
+          '100%': {opacity: 1},
         },
         fadeInLeft: {
-          '0%': { opacity: 0, transform: 'translateX(-20px)' },
-          '100%': { opacity: 1, transform: 'translateX(0)' },
+          '0%': {opacity: 0, transform: 'translateX(-20px)'},
+          '100%': {opacity: 1, transform: 'translateX(0)'},
         },
         fadeInRight: {
-          '0%': { opacity: 0, transform: 'translateX(20px)' },
-          '100%': { opacity: 1, transform: 'translateX(0)' },
+          '0%': {opacity: 0, transform: 'translateX(20px)'},
+          '100%': {opacity: 1, transform: 'translateX(0)'},
         },
       }),
       fontFamily: {
@@ -55,6 +53,9 @@ module.exports = {
         red: '#e1567c',
         gold: '#F1B71C',
       },
+      screens: {
+        'lg-xl': {min: '1130px'},
+      },
     },
   },
   plugins: [