Skip to content

Enhance Mobile Responsiveness and Accessibility in Global Styles #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Punitkumar756 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Enhance Mobile Responsiveness and Accessibility in Global Styles #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
000bcc2
Enhance responsiveness and layout adjustments across multiple components
Dec 13, 2025
d0a8beb
Enhance layout and responsiveness with fluid spacing, improved typogr…
Dec 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions app/createHackathon/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,7 +322,7 @@ export default function CreateHackathon() {
{/* Hackathon Name */}
<div className="space-y-2">
<div className="flex items-center gap-4">
<div className="flex items-center gap-2 min-w-[200px]">
<div className="flex items-center gap-2 sm:min-w-[200px]">
<Sparkles className="w-4 h-4 text-[#8B6914]" />
<Label htmlFor="name" className="text-gray-700 font-medium">Hackathon Name *</Label>
<button
Expand Down Expand Up @@ -354,7 +354,7 @@ export default function CreateHackathon() {
<div className="space-y-4">
{/* Timezone Toggle */}
<div className="flex items-center gap-4">
<div className="flex items-center gap-2 min-w-[200px]">
<div className="flex items-center gap-2 sm:min-w-[200px]">
<Globe className="w-4 h-4 text-[#8B6914]" />
<Label className="text-gray-700 font-medium">Timezone</Label>
<button
Expand Down Expand Up @@ -459,7 +459,7 @@ export default function CreateHackathon() {
{/* Image URL */}
<div className="space-y-2">
<div className="flex items-center gap-4">
<div className="flex items-center gap-2 min-w-[200px]">
<div className="flex items-center gap-2 sm:min-w-[200px]">
<Globe className="w-4 h-4 text-[#8B6914]" />
<Label htmlFor="imageURL" className="text-gray-700 font-medium">Image URL (Optional)</Label>
<button
Expand Down
302 changes: 302 additions & 0 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ body {
/* Custom scrollbar for webkit browsers */
.scrollbar-thin::-webkit-scrollbar {
height: 6px;
width: 6px;
}

.scrollbar-thumb-amber-300::-webkit-scrollbar-thumb {
Expand All @@ -34,6 +35,13 @@ body {
-webkit-line-clamp: 2;
}

.line-clamp-3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}

/* Infinite scrolling animation */
@keyframes scroll-left {
0% {
Expand All @@ -46,11 +54,230 @@ body {

.animate-scroll-left {
animation: scroll-left 30s linear infinite;
will-change: transform;
}

.animate-scroll-left:hover {
animation-play-state: paused;
}

/* Advanced Responsive utilities */
.mobile-padding {
padding: clamp(0.75rem, 4vw, 1.5rem);
}

.mobile-margin {
margin: clamp(0.75rem, 4vw, 1.5rem);
}

.mobile-hidden {
display: none;
}

.mobile-flex {
display: flex;
flex-direction: column;
gap: 1rem;
}

.mobile-center {
display: flex;
justify-content: center;
align-items: center;
}

/* Fluid spacing */
.fluid-gap {
gap: clamp(0.5rem, 2vw, 1rem);
}

.fluid-padding {
padding: clamp(1rem, 3vw, 2rem);
}

/* Smooth interactions */
.smooth-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.smooth-hover:hover {
transform: translateY(-2px);
}

/* Prevent text selection on interactive elements */
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* Safe area for notch devices */
.safe-top {
padding-top: env(safe-area-inset-top);
}

.safe-bottom {
padding-bottom: env(safe-area-inset-bottom);
}
}

@media (max-width: 768px) {
body {
padding: 0;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.container {
width: 100%;
padding: 0 clamp(0.75rem, 4vw, 1.5rem);
max-width: 100vw;
}

/* Ensure cards don't overflow */
.card {
max-width: 100%;
}

/* Fluid typography for better readability */
h1 {
font-size: clamp(1.5rem, 5vw, 2.25rem);
line-height: 1.2;
}

h2 {
font-size: clamp(1.25rem, 4vw, 1.875rem);
line-height: 1.3;
}

h3 {
font-size: clamp(1.125rem, 3.5vw, 1.5rem);
line-height: 1.4;
}

p {
font-size: clamp(0.875rem, 2.5vw, 1rem);
line-height: 1.6;
}

/* Prevent horizontal scroll */
* {
max-width: 100vw;
}
Comment on lines +166 to +168
Copy link

Copilot AI Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Applying max-width: 100vw to all elements with the universal selector * is overly aggressive and can cause layout issues. This prevents any element from being wider than the viewport, which may break intentional overflow designs like horizontal scrolling carousels or off-canvas menus. Consider applying this constraint only to specific container elements that need it.

Suggested change
* {
max-width: 100vw;
}

Copilot uses AI. Check for mistakes.

img {
max-width: 100%;
height: auto;
}

/* Optimize button sizing */
button, a[role="button"] {
padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.75rem, 3vw, 1rem);
Copy link

Copilot AI Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The button padding override on lines 176-178 can conflict with the explicit min-height requirement on lines 393-396. The clamp function could result in buttons smaller than the 44px minimum touch target on very small screens. Consider ensuring buttons always meet the 44px minimum by using min-height: 44px here as well, or removing the padding override to let component-level styles handle sizing.

Suggested change
padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.75rem, 3vw, 1rem);
padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.75rem, 3vw, 1rem);
min-height: 44px;

Copilot uses AI. Check for mistakes.
}

/* Better input sizing */
input, select, textarea {
font-size: 16px; /* Prevents zoom on iOS */
min-height: 44px;
}

/* Optimize table scrolling */
table {
display: block;
Copy link

Copilot AI Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changing tables to display: block globally breaks table semantics and accessibility. Screen readers rely on table structure to announce row and column headers properly. While this allows horizontal scrolling, it removes the semantic meaning of tables. Consider wrapping tables in a scrollable container div instead, or use overflow-x: auto directly on table elements without changing their display property.

Suggested change
display: block;

Copilot uses AI. Check for mistakes.
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

/* Better modal sizing */
[role="dialog"], .modal {
max-width: calc(100vw - 2rem);
max-height: calc(100vh - 2rem);
margin: 1rem;
}

/* Reduce animations for performance */
* {
animation-duration: 0.5s !important;
transition-duration: 0.2s !important;
}
Comment on lines +200 to +204
Copy link

Copilot AI Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Forcing reduced animation and transition durations globally with !important on all elements can break animations that require specific timing for proper functionality. This overrides all carefully crafted animations in the codebase, potentially causing visual glitches. Consider using prefers-reduced-motion media query instead to respect user preferences while maintaining proper animation timing for users who want animations.

Copilot uses AI. Check for mistakes.
}

/* Extra small devices (phones in portrait mode) */
@media (max-width: 480px) {
body {
font-size: 14px;
}

.container {
padding: 0 clamp(0.5rem, 3vw, 1rem);
}

h1 {
font-size: clamp(1.25rem, 6vw, 1.75rem);
line-height: 1.2;
}

h2 {
font-size: clamp(1.125rem, 5vw, 1.5rem);
line-height: 1.3;
}

button {
font-size: 0.875rem;
padding: 0.625rem 1rem;
}

/* Stack flex items */
.flex {
flex-direction: column !important;
}
Comment on lines +233 to +235
Copy link

Copilot AI Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using !important on universal selectors can cause unintended side effects and override specific styles throughout the application. This applies flex-direction: column !important to all elements with the .flex class, which could break intentional horizontal layouts on mobile devices. Consider using more specific selectors or Tailwind's responsive utilities (like sm:flex-row) instead of forcing all flex containers to column layout.

Suggested change
.flex {
flex-direction: column !important;
}

Copilot uses AI. Check for mistakes.

/* Reduce gaps */
.gap-4 {
gap: 0.75rem !important;
}

.gap-6 {
gap: 1rem !important;
}

Comment on lines +238 to +245
Copy link

Copilot AI Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using !important with utility class overrides like .gap-4 and .gap-6 can break Tailwind's utility-first design and make it difficult to create exceptions where needed. This forces all gap values on mobile, even where developers may intentionally want different spacing. Consider using Tailwind's responsive utilities instead.

Suggested change
.gap-4 {
gap: 0.75rem !important;
}
.gap-6 {
gap: 1rem !important;
}

Copilot uses AI. Check for mistakes.
/* Better card spacing */
.card {
padding: 1rem !important;
}
Comment on lines +247 to +249
Copy link

Copilot AI Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The global .card class override with padding: 1rem !important will force all card components to use 1rem padding on small screens, potentially breaking cards that need different spacing. This is overly aggressive and removes flexibility. Consider using Tailwind's responsive padding utilities (like p-4 sm:p-6) on individual card components instead of forcing all cards to have the same padding.

Suggested change
.card {
padding: 1rem !important;
}

Copilot uses AI. Check for mistakes.
}
Comment on lines +208 to +250
Copy link

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Review aggressive layout forcing on extra-small devices.

Lines 233-235 force all flex containers to stack vertically with !important:

.flex {
  flex-direction: column !important;
}

This override could break intentional horizontal layouts (e.g., icon+text buttons, inline badges, navigation items) on small screens. Consider:

  1. Using a more specific selector or opt-in class (e.g., .mobile-stack)
  2. Testing all flex containers across the app to ensure no unintended layout breaks

Apply this approach for safer implementation:

-  /* Stack flex items */
-  .flex {
-    flex-direction: column !important;
-  }
+  /* Stack flex items - opt-in class */
+  .mobile-stack {
+    flex-direction: column;
+  }

Then explicitly add mobile-stack class to containers that should stack on mobile.

🤖 Prompt for AI Agents 
In app/globals.css around lines 208 to 250, the rule that forces all .flex
containers to column with !important is too aggressive and can break intended
horizontal layouts; update the stylesheet to remove that global override and
instead introduce a scoped class (e.g., .mobile-stack or .flex--stack) that
applies flex-direction: column only under the @media (max-width: 480px) query
without using !important, then replace usages in the markup by adding that new
class to the specific components that should stack on mobile (icon+text buttons,
cards, nav items, etc.), and run a quick pass through affected UI to verify no
unintended layout regressions.


/* Landscape phones */
@media (max-height: 500px) and (orientation: landscape) {
header {
position: static !important;
}

.hero-section {
min-height: auto !important;
padding: 2rem 0 !important;
}
}

/* Tablet devices */
@media (min-width: 769px) and (max-width: 1024px) {
.container {
padding: 0 2rem;
}

body {
font-size: 15px;
}
}

/* Large screens optimization */
@media (min-width: 1920px) {
.container {
max-width: 1800px;
margin: 0 auto;
}
}

@layer base {
Expand Down Expand Up @@ -129,12 +356,67 @@ body {
* {
@apply border-border;
}

body {
@apply bg-background text-foreground;
font-feature-settings: "kern" 1, "liga" 1;
text-rendering: optimizeLegibility;
}

html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}

/* Enhanced touch-friendly interactive elements */
button, a, input, select, textarea {
-webkit-tap-highlight-color: rgba(251, 191, 36, 0.2);
tap-highlight-color: rgba(251, 191, 36, 0.2);
}
Comment on lines +373 to +376
Copy link

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Fix non-standard CSS property.

Line 375 uses tap-highlight-color without the -webkit- prefix. This property requires a vendor prefix and won't work in its current form.

Apply this fix:

  button, a, input, select, textarea {
    -webkit-tap-highlight-color: rgba(251, 191, 36, 0.2);
-   tap-highlight-color: rgba(251, 191, 36, 0.2);
  }

Based on static analysis hints (Biome lint tool).

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
button, a, input, select, textarea {
-webkit-tap-highlight-color: rgba(251, 191, 36, 0.2);
tap-highlight-color: rgba(251, 191, 36, 0.2);
}
button, a, input, select, textarea {
-webkit-tap-highlight-color: rgba(251, 191, 36, 0.2);
}
🧰 Tools
🪛 Biome (2.1.2)

[error] 375-375: Unknown property is not allowed.

See CSS Specifications and browser specific properties for more details.
To resolve this issue, replace the unknown property with a valid CSS property.

(lint/correctness/noUnknownProperty)

🤖 Prompt for AI Agents 
In app/globals.css around lines 373 to 376, the rule includes a non-standard
tap-highlight-color property without the vendor prefix; remove the unprefixed
tap-highlight-color line and keep the vendor-prefixed
-webkit-tap-highlight-color declaration (ensure -webkit-tap-highlight-color:
rgba(251, 191, 36, 0.2); remains) so the intended behavior uses the supported
WebKit-only property as flagged by the Biome lint.


/* Better focus states for accessibility */
*:focus-visible {
outline: 2px solid rgba(251, 191, 36, 0.8);
outline-offset: 2px;
border-radius: 4px;
}

/* Smooth scrolling for all containers */
* {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
Comment on lines +386 to +388
Copy link

Copilot AI Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Setting scroll-behavior: smooth on all elements with the universal selector can cause performance issues, especially on mobile devices. Smooth scrolling should typically only be applied to the html element (which is already done on line 367). Additionally, this doesn't respect users who have set prefers-reduced-motion, which is an accessibility concern.

Copilot uses AI. Check for mistakes.
}

/* Ensure buttons have adequate touch target size on mobile */
@media (max-width: 768px) {
button:not(.compact) {
min-height: 44px;
min-width: 44px;
touch-action: manipulation;
}

a:not(.compact) {
min-height: 44px;
display: inline-flex;
align-items: center;
}

/* Disable double-tap zoom */
* {
touch-action: manipulation;
}
Comment on lines +406 to +408
Copy link

Copilot AI Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Disabling double-tap zoom by applying touch-action: manipulation to all elements removes an important accessibility feature for users who need to zoom in to read content. This violates WCAG 2.1 Success Criterion 1.4.4 (Resize text). Consider applying this only to specific interactive elements like buttons where double-tap zoom interferes with functionality, not globally to all elements.

Suggested change
* {
touch-action: manipulation;
}

Copilot uses AI. Check for mistakes.
}

/* Optimize images */
img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
Comment on lines +412 to +415
Copy link

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Remove duplicate image-rendering property.

Lines 413-414 declare image-rendering twice with different values. The second declaration overrides the first, making the webkit-specific value ineffective. Keep only the standard property unless you specifically need the webkit fallback for older Safari versions.

Apply this fix:

  img {
-   image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }

If you need webkit fallback for older Safari, reverse the order so the standard property comes last as a progressive enhancement.

Based on static analysis hints (Biome lint tool).

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
img {
image-rendering: crisp-edges;
}
🧰 Tools
🪛 Biome (2.1.2)

[error] 414-414: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.

image-rendering is already defined here.

Remove or rename the duplicate property to ensure consistent styling.

(lint/suspicious/noDuplicateProperties)

🤖 Prompt for AI Agents 
In app/globals.css around lines 412 to 415, the img rule declares
image-rendering twice (webkit-specific then standard) so the second overrides
the first; fix by removing the duplicate — keep only the standard
image-rendering: crisp-edges declaration, or if you need the older Safari
fallback, reverse the declarations so the -webkit-optimize-contrast comes first
and image-rendering: crisp-edges comes last (progressive enhancement).

Comment on lines +413 to +415
Copy link

Copilot AI Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using image-rendering: crisp-edges as a fallback can cause images to look pixelated and low-quality, especially for photographs. The -webkit-optimize-contrast property is also non-standard and may produce unexpected results. Consider removing these properties and letting browsers use their default high-quality image rendering, or use image-rendering: auto for better cross-browser consistency.

Suggested change
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
image-rendering: auto;
}

Copilot uses AI. Check for mistakes.

/* Better link styling */
a {
text-decoration-skip-ink: auto;
}

/* Make date and time input icons more visible */
Expand All @@ -154,4 +436,24 @@ body {
input[type="time"]::-webkit-calendar-picker-indicator:hover {
opacity: 0.8 !important;
}

/* Remove spinner from number inputs on mobile */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

input[type="number"] {
-moz-appearance: textfield;
}

/* Better select styling */
select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
padding-right: 2.5rem;
}
}
Loading