Skip to content

Commit 71d0224

Browse files
pavanpaikpavanpaik
committed
fix: adjust layout breakpoints to lg (1024px) for optimized iPad support and full-width music player
1 parent eae971c commit 71d0224

6 files changed

Lines changed: 23 additions & 23 deletions

File tree

‎web/src/app/(main)/ask/page.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ export default function AskPage() {
176176
});
177177

178178
return (
179-
<div className="max-w-4xl mx-auto space-y-4 pt-4 px-4 pb-20 md:pb-10">
179+
<div className="max-w-4xl mx-auto space-y-4 pt-4 px-4 pb-20 lg:pb-10">
180180
{!isSignedIn ? (
181181
/* GUEST VIEW */
182182
<div className="flex flex-col items-center justify-center min-h-[60vh] text-center space-y-6 max-w-lg mx-auto w-full px-4 animate-in fade-in duration-700">
@@ -190,7 +190,7 @@ export default function AskPage() {
190190
</p>
191191
</div>
192192
<SignInButton mode="modal">
193-
<button className="bg-ochre text-white px-10 py-4 rounded-2xl font-black uppercase tracking-widest hover:bg-gold transition-all shadow-xl shadow-ochre/20 w-full md:w-auto active:scale-95">
193+
<button className="bg-ochre text-white px-10 py-4 rounded-2xl font-black uppercase tracking-widest hover:bg-gold transition-all shadow-xl shadow-ochre/20 w-full lg:w-auto active:scale-95">
194194
Identify to Begin
195195
</button>
196196
</SignInButton>
@@ -231,7 +231,7 @@ export default function AskPage() {
231231
<div className="flex flex-col space-y-8 animate-in fade-in duration-500">
232232
{tickets.length === 0 ? (
233233
<div className="bg-white rounded-[2.5rem] shadow-xl shadow-ochre/5 border border-gray-100 overflow-hidden">
234-
<div className="p-6 md:p-10 text-center space-y-4">
234+
<div className="p-6 lg:p-10 text-center space-y-4">
235235
<div className="w-12 h-12 bg-ochre/5 rounded-2xl flex items-center justify-center mx-auto text-ochre shadow-inner">
236236
<Send className="w-5 h-5" />
237237
</div>
@@ -361,16 +361,16 @@ export default function AskPage() {
361361
)}
362362

363363
<div className="flex items-center justify-between">
364-
<div className="flex bg-gray-100 p-1.5 rounded-2xl w-full md:w-auto">
364+
<div className="flex bg-gray-100 p-1.5 rounded-2xl w-full lg:w-auto">
365365
<button
366366
onClick={() => setActiveTab('open')}
367-
className={`flex-1 md:flex-none py-2 px-6 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${activeTab === 'open' ? 'bg-white text-ochre shadow-sm' : 'text-gray-400 hover:text-gray-600'}`}
367+
className={`flex-1 lg:flex-none py-2 px-6 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${activeTab === 'open' ? 'bg-white text-ochre shadow-sm' : 'text-gray-400 hover:text-gray-600'}`}
368368
>
369369
Ongoing
370370
</button>
371371
<button
372372
onClick={() => setActiveTab('closed')}
373-
className={`flex-1 md:flex-none py-2 px-6 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${activeTab === 'closed' ? 'bg-white text-ochre shadow-sm' : 'text-gray-400 hover:text-gray-600'}`}
373+
className={`flex-1 lg:flex-none py-2 px-6 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${activeTab === 'closed' ? 'bg-white text-ochre shadow-sm' : 'text-gray-400 hover:text-gray-600'}`}
374374
>
375375
Archived
376376
</button>
@@ -399,7 +399,7 @@ export default function AskPage() {
399399
<div key={ticket.id} className={`border rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 ${isUnreadAnswered || isUnreadClosed ? 'bg-blue-50/40 border-blue-200 ring-4 ring-blue-50/50' : 'bg-white border-gray-100'}`}>
400400
<div
401401
onClick={() => handleOpenTicket(ticket)}
402-
className={`p-4 md:p-5 flex items-center justify-between cursor-pointer transition-colors hover:bg-gray-50/80 active:scale-[0.99] group`}
402+
className={`p-4 lg:p-5 flex items-center justify-between cursor-pointer transition-colors hover:bg-gray-50/80 active:scale-[0.99] group`}
403403
>
404404
<div className="flex items-center space-x-4 min-w-0 flex-1 relative">
405405
{isUnreadAnswered && (
@@ -417,7 +417,7 @@ export default function AskPage() {
417417
{ticket.status === 'CLOSED' ? <Archive className="w-5 h-5" /> : <MessageCircleQuestion className={`w-5 h-5 ${ticket.status === 'OPEN' && 'animate-pulse'}`} />}
418418
</div>
419419
<div className="min-w-0">
420-
<h3 className={`text-sm md:text-base leading-tight truncate ${isUnreadAnswered || isUnreadClosed ? 'font-black text-gray-900' : 'font-bold text-gray-600'}`}>{ticket.subject}</h3>
420+
<h3 className={`text-sm lg:text-base leading-tight truncate ${isUnreadAnswered || isUnreadClosed ? 'font-black text-gray-900' : 'font-bold text-gray-600'}`}>{ticket.subject}</h3>
421421
<div className="text-[10px] text-gray-400 font-bold uppercase tracking-widest mt-0.5 flex items-center space-x-2">
422422
<span className="bg-gray-100 px-1.5 py-0.5 rounded text-[8px]">#{ticket.id.slice(-6)}</span>
423423
<span className="opacity-30">•</span>
@@ -427,12 +427,12 @@ export default function AskPage() {
427427
</div>
428428
<div className="flex items-center space-x-3 ml-2 flex-none">
429429
{ticket.status === 'ANSWERED' && (
430-
<span className={`hidden md:block px-2.5 py-1 rounded-lg text-[8px] font-black uppercase tracking-widest border transition-all ${isUnreadAnswered ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-500/20' : 'bg-blue-50 text-blue-600 border-blue-100'}`}>
430+
<span className={`hidden lg:block px-2.5 py-1 rounded-lg text-[8px] font-black uppercase tracking-widest border transition-all ${isUnreadAnswered ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-500/20' : 'bg-blue-50 text-blue-600 border-blue-100'}`}>
431431
{isUnreadAnswered ? 'New Guidance' : 'Read Guidance'}
432432
</span>
433433
)}
434434
{ticket.status === 'CLOSED' && (
435-
<span className={`hidden md:block px-2.5 py-1 rounded-lg text-[8px] font-black uppercase tracking-widest border transition-all ${isUnreadClosed ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-500/20' : 'bg-blue-50 text-blue-600 border-blue-100'}`}>
435+
<span className={`hidden lg:block px-2.5 py-1 rounded-lg text-[8px] font-black uppercase tracking-widest border transition-all ${isUnreadClosed ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-500/20' : 'bg-blue-50 text-blue-600 border-blue-100'}`}>
436436
{isUnreadClosed ? 'New Update' : 'Finished'}
437437
</span>
438438
)}
@@ -466,7 +466,7 @@ export default function AskPage() {
466466
{/* Thread Content */}
467467
<div
468468
ref={scrollRef}
469-
className="flex-1 overflow-y-auto p-4 md:p-6 space-y-4 no-scrollbar bg-gray-50/50 scroll-smooth"
469+
className="flex-1 overflow-y-auto p-4 lg:p-6 space-y-4 no-scrollbar bg-gray-50/50 scroll-smooth"
470470
>
471471
{tickets.find(t => t.id === expandedTicketId)?.messages.map((msg: TicketMessage, idx: number) => (
472472
<div key={msg.id || idx} className={`flex flex-col ${msg.sender === 'USER' ? 'items-end' : 'items-start'}`}>
@@ -500,7 +500,7 @@ export default function AskPage() {
500500
</div>
501501

502502
{tickets.find(t => t.id === expandedTicketId)?.status !== 'CLOSED' ? (
503-
<div className="p-4 md:p-6 bg-white border-t border-gray-100">
503+
<div className="p-4 lg:p-6 bg-white border-t border-gray-100">
504504
<textarea
505505
value={followUpText[expandedTicketId] || ''}
506506
onChange={(e) => setFollowUpText(prev => ({ ...prev, [expandedTicketId!]: e.target.value }))}
@@ -511,7 +511,7 @@ export default function AskPage() {
511511
<div className="flex items-center justify-between gap-3">
512512
<button
513513
onClick={() => setTicketToClose(expandedTicketId)}
514-
className="text-[9px] md:text-[10px] font-black text-gray-400 uppercase tracking-widest hover:text-red-600 hover:bg-red-50 px-3 md:px-4 py-2.5 rounded-xl transition-all active:scale-95 flex items-center group border border-transparent hover:border-red-100"
514+
className="text-[9px] lg:text-[10px] font-black text-gray-400 uppercase tracking-widest hover:text-red-600 hover:bg-red-50 px-3 lg:px-4 py-2.5 rounded-xl transition-all active:scale-95 flex items-center group border border-transparent hover:border-red-100"
515515
>
516516
<Archive className="w-3 h-3 mr-1.5 md:mr-2 opacity-40 group-hover:opacity-100 transition-opacity" />
517517
Archive Inquiry
@@ -531,7 +531,7 @@ export default function AskPage() {
531531
</div>
532532
</div>
533533
) : (
534-
<div className="p-4 md:p-6 bg-white border-t border-gray-50 flex justify-center items-center">
534+
<div className="p-4 lg:p-6 bg-white border-t border-gray-100 flex justify-center items-center">
535535
<div className="flex items-center space-x-2 text-gray-300">
536536
<CheckCircle2 className="w-4 h-4" />
537537
<span className="text-[10px] font-black uppercase tracking-[0.2em]">Inquiry Completed</span>

‎web/src/components/audio/MiniPlayer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function MiniPlayer() {
1313
if (!currentTrack) return null;
1414

1515
return (
16-
<div className="fixed bottom-[calc(4rem+env(safe-area-inset-bottom))] md:bottom-0 left-0 right-0 md:left-64 z-40 bg-white border-t border-gray-200 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)]">
16+
<div className="fixed bottom-[calc(4rem+env(safe-area-inset-bottom))] lg:bottom-0 left-0 right-0 lg:left-64 z-40 bg-white border-t border-gray-200 shadow-[0_-4px_12px_-2px_rgba(0,0,0,0.08)]">
1717
{/* Progress Bar */}
1818
<div className="h-1 w-full bg-gray-100 cursor-pointer">
1919
<div

‎web/src/components/layout/BottomNav.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default function BottomNav() {
1818
const { unreadCount } = useInquiry();
1919

2020
return (
21-
<nav className="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-xl border-t border-gray-100 z-[120] md:hidden shadow-[0_-4px_12px_-4px_rgba(0,0,0,0.05)]">
21+
<nav className="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-xl border-t border-gray-100 z-[120] lg:hidden shadow-[0_-4px_12px_-4px_rgba(0,0,0,0.05)]">
2222
<div className="flex justify-around items-center h-16 box-content pb-safe">
2323
{NAV_ITEMS.map((item) => {
2424
const Icon = item.icon;

‎web/src/components/layout/Header.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import UtilityMenu from '@/components/layout/UtilityMenu';
44

55
export default function Header() {
66
return (
7-
<header className="fixed top-0 left-0 right-0 h-16 bg-white border-b border-gray-100 z-[120] flex items-center justify-center px-4 shadow-sm md:fixed md:top-4 md:right-4 md:left-auto md:w-auto md:h-auto md:bg-transparent md:border-none md:shadow-none md:justify-end md:px-0 pointer-events-none">
8-
<div className="max-w-7xl w-full flex items-center justify-between md:justify-end pointer-events-auto">
9-
<Link href="/" className="flex items-center gap-3 md:hidden min-w-0 flex-shrink">
7+
<header className="fixed top-0 left-0 right-0 h-16 bg-white border-b border-gray-100 z-[120] flex items-center justify-center px-4 shadow-sm lg:fixed lg:top-4 lg:right-4 lg:left-auto lg:w-auto lg:h-auto lg:bg-transparent lg:border-none lg:shadow-none lg:justify-end lg:px-0 pointer-events-none">
8+
<div className="max-w-7xl w-full flex items-center justify-between lg:justify-end pointer-events-auto">
9+
<Link href="/" className="flex items-center gap-3 lg:hidden min-w-0 flex-shrink">
1010
<Image
1111
src="/saileela-logo.png"
1212
alt="Saileela Rahasya"

‎web/src/components/layout/Layout.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ export default function Layout({ children }: { children: React.ReactNode }) {
1616
<AudioProvider allTracks={audioTracks}>
1717
<div className="flex min-h-screen bg-gray-50">
1818
<Sidebar />
19-
<div className="flex-1 flex flex-col md:ml-64 transition-all duration-300">
19+
<div className="flex-1 flex flex-col lg:ml-64 transition-all duration-300">
2020
<Header />
21-
<main className="flex-1 pt-16 md:pt-0 pb-32 md:pb-4 max-w-7xl mx-auto w-full relative">
22-
<div className="md:px-4 page-fade-in" key={pathname}>
21+
<main className="flex-1 pt-16 lg:pt-0 pb-32 lg:pb-4 max-w-7xl mx-auto w-full relative">
22+
<div className="lg:px-4 page-fade-in" key={pathname}>
2323
{children}
2424
</div>
2525
</main>

‎web/src/components/layout/Sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function Sidebar() {
1919
const { unreadCount } = useInquiry();
2020

2121
return (
22-
<aside className="hidden md:flex flex-col w-64 fixed left-0 top-0 bottom-0 bg-white border-r border-gray-100 z-40">
22+
<aside className="hidden lg:flex flex-col w-64 fixed left-0 top-0 bottom-0 bg-white border-r border-gray-100 z-40">
2323
<div className="h-16 flex items-center px-3 border-b border-gray-100">
2424
<Link href="/" className="flex items-center gap-3">
2525
<Image

0 commit comments

Comments
 (0)