From a81e97fb310682906e598512d34e94d560c1d16a Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Wed, 27 May 2026 12:42:25 -0500
Subject: [PATCH] mobile view

---
 src/components/layout/Header.jsx | 2 +-
 src/index.css                    | 2 ++
 src/pages/About.jsx              | 8 ++++----
 src/pages/Home.jsx               | 4 ++--
 src/pages/Industries.jsx         | 4 ++--
 src/pages/Services.jsx           | 8 ++++----
 src/pages/Support.jsx            | 4 ++--
 7 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx
index acd6a4b..63593f5 100644
--- a/src/components/layout/Header.jsx
+++ b/src/components/layout/Header.jsx
@@ -154,7 +154,7 @@ const Header = () => {
                   </svg>
                 </button>
               </SheetTrigger>
-              <SheetContent side="right" className="w-[300px] sm:w-[350px] bg-primary-navy text-white">
+              <SheetContent side="right" className="w-[85vw] max-w-[300px] sm:w-[350px] bg-primary-navy text-white">
                 <VisuallyHidden.Root asChild>
                   <SheetTitle>Navigation Menu</SheetTitle>
                 </VisuallyHidden.Root>
diff --git a/src/index.css b/src/index.css
index 186e747..c25aea6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,6 +10,7 @@
 
 html {
   scroll-behavior: smooth;
+  overflow-x: hidden;
 }
 
 body {
@@ -18,6 +19,7 @@ body {
   background-color: #F8FAFC;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
 }
 
 img {
diff --git a/src/pages/About.jsx b/src/pages/About.jsx
index 0492f22..bf60dc5 100644
--- a/src/pages/About.jsx
+++ b/src/pages/About.jsx
@@ -118,11 +118,11 @@ const About = () => {
                 Queue North helps organizations choose, implement, and support the phone, contact center, network, and IT systems that keep daily operations moving.
               </p>
               <div className="mt-8 flex flex-col sm:flex-row gap-3">
-                <Link to="/contact" className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors">
+                <Link to="/contact" className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors">
                   Start a Conversation
                   <ArrowRight className="h-4 w-4" aria-hidden="true" />
                 </Link>
-                <Link to="/services" className="inline-flex h-11 items-center justify-center rounded-md border border-white/40 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors">
+                <Link to="/services" className="inline-flex w-full sm:w-auto h-11 items-center justify-center rounded-md border border-white/40 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors">
                   View Services
                 </Link>
               </div>
@@ -263,14 +263,14 @@ const About = () => {
             <div className="mt-7 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-shrink-0">
               <Link
                 to="/contact"
-                className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
+                className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
               >
                 Request Consultation
                 <ArrowRight className="h-4 w-4" aria-hidden="true" />
               </Link>
               <a
                 href="tel:+13217308020"
-                className="inline-flex h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
+                className="inline-flex w-full sm:w-auto h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
               >
                 Call (321) 730-8020
               </a>
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 28de80e..faad166 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -153,11 +153,11 @@ const Home = () => {
               Business phone, contact center, network, and IT support built around one accountable implementation partner.
             </p>
             <div className="mt-8 flex flex-col sm:flex-row gap-3">
-              <Link to="/contact" className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors" aria-label="Schedule a consultation">
+              <Link to="/contact" className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors" aria-label="Schedule a consultation">
                 Schedule Consultation
                 <ArrowRight className="h-4 w-4" aria-hidden="true" />
               </Link>
-              <Link to="/services" className="inline-flex h-11 items-center justify-center rounded-md border border-white/45 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors" aria-label="View our services">
+              <Link to="/services" className="inline-flex w-full sm:w-auto h-11 items-center justify-center rounded-md border border-white/45 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors" aria-label="View our services">
                 View Services
               </Link>
             </div>
diff --git a/src/pages/Industries.jsx b/src/pages/Industries.jsx
index bad44c5..43d47db 100644
--- a/src/pages/Industries.jsx
+++ b/src/pages/Industries.jsx
@@ -121,14 +121,14 @@ const Industries = () => {
             <div className="mt-7 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-shrink-0">
               <Link
                 to="/contact"
-                className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
+                className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
               >
                 Talk to a Specialist
                 <ArrowRight className="h-4 w-4" aria-hidden="true" />
               </Link>
               <a
                 href="tel:+13217308020"
-                className="inline-flex h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
+                className="inline-flex w-full sm:w-auto h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
               >
                 Call (321) 730-8020
               </a>
diff --git a/src/pages/Services.jsx b/src/pages/Services.jsx
index 362b5bf..7de0290 100644
--- a/src/pages/Services.jsx
+++ b/src/pages/Services.jsx
@@ -97,14 +97,14 @@ const Services = () => {
             <div className="flex flex-col sm:flex-row gap-3">
               <Link
                 to="/contact"
-                className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
+                className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
               >
                 Get a Free Quote
                 <ArrowRight className="h-4 w-4" aria-hidden="true" />
               </Link>
               <Link
                 to="/support"
-                className="inline-flex h-11 items-center justify-center rounded-md border border-white/40 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
+                className="inline-flex w-full sm:w-auto h-11 items-center justify-center rounded-md border border-white/40 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
               >
                 Existing Client? Get Support
               </Link>
@@ -189,14 +189,14 @@ const Services = () => {
             <div className="mt-7 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-shrink-0">
               <Link
                 to="/contact"
-                className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
+                className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
               >
                 Schedule a Consultation
                 <ArrowRight className="h-4 w-4" aria-hidden="true" />
               </Link>
               <a
                 href="tel:+13217308020"
-                className="inline-flex h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
+                className="inline-flex w-full sm:w-auto h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
               >
                 Call (321) 730-8020
               </a>
diff --git a/src/pages/Support.jsx b/src/pages/Support.jsx
index ab0348b..db6d157 100644
--- a/src/pages/Support.jsx
+++ b/src/pages/Support.jsx
@@ -64,7 +64,7 @@ const Support = () => {
                   href={portalLinks[0].href}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
+                  className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
                 >
                   Sign In
                   <ArrowRight className="h-4 w-4" aria-hidden="true" />
@@ -73,7 +73,7 @@ const Support = () => {
                   href={portalLinks[1].href}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="inline-flex h-11 items-center justify-center gap-2 rounded-md border border-white/40 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
+                  className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md border border-white/40 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
                 >
                   Create Account
                   <ExternalLink className="h-4 w-4" aria-hidden="true" />