Skip to content

Enhance responsiveness and layout adjustments across multiple components #57

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 responsiveness and layout adjustments across multiple components #57

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;
Comment on lines +65 to +86
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 mobile utility classes defined here (.mobile-padding, .mobile-margin, etc.) are not wrapped in a media query, so they will apply at all screen sizes. These classes are named "mobile-*" but are always active. If these are intended to be mobile-specific, they should be wrapped in a @media (max-width: 768px) query, or their naming should be changed to reflect that they're always available utility classes.

Suggested change
.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;
@media (max-width: 768px) {
.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;
}

Copilot uses AI. Check for mistakes.
}

/* 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 {
Comment on lines +114 to +116
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 universal selector rule * { max-width: 100vw; } inside the media query is too aggressive and can cause unintended side effects. This will force every single element to have a max-width of 100vw, which could break layouts that rely on specific width calculations, flex layouts, or absolute positioned elements. Consider applying this rule more selectively to specific container elements or removing it in favor of targeting specific problematic elements.

Copilot uses AI. Check for mistakes.
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;
}

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);
}

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

/* Optimize table scrolling */
table {
display: block;
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;
}
}

/* 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;
}

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

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

/* Better card spacing */
.card {
padding: 1rem !important;
}
}
Comment on lines +247 to +250
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 sizing rule uses a .compact class exclusion, but this class doesn't appear to be defined elsewhere in the stylesheet or used in the components being modified. This creates an implicit dependency on a class that may not exist. Consider either defining the .compact class or using a more explicit approach like a .touch-target class that is explicitly added where needed.

Copilot uses AI. Check for mistakes.
Comment on lines +207 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

High-risk global overrides: .flex { flex-direction: column !important; } (and forced gap changes).
This will break many non-mobile layouts inside the 480px breakpoint (including headers/toolbars that must remain rows) and is very hard to reason about. Prefer scoping to specific containers via utility classes (or deleting these overrides).

 @media (max-width: 480px) {
-  /* Stack flex items */
-  .flex {
-    flex-direction: column !important;
-  }
-  
-  /* Reduce gaps */
-  .gap-4 {
-    gap: 0.75rem !important;
-  }
-  
-  .gap-6 {
-    gap: 1rem !important;
-  }
+  /* Avoid global overrides of Tailwind utility classes; handle stacking/gaps per-component. */
 }
📝 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
/* 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;
}
/* Reduce gaps */
.gap-4 {
gap: 0.75rem !important;
}
.gap-6 {
gap: 1rem !important;
}
/* Better card spacing */
.card {
padding: 1rem !important;
}
}
/* 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;
}
/* Avoid global overrides of Tailwind utility classes; handle stacking/gaps per-component. */
/* Better card spacing */
.card {
padding: 1rem !important;
}
}


/* 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 | 🟠 Major

Fix Biome “unknown property”: remove tap-highlight-color.
tap-highlight-color isn’t a valid standard property; keep the WebKit-prefixed one only.

 button, a, input, select, textarea {
   -webkit-tap-highlight-color: rgba(251, 191, 36, 0.2);
-  tap-highlight-color: rgba(251, 191, 36, 0.2);
 }
📝 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, remove the non-standard
"tap-highlight-color" property to avoid the Biome “unknown property” warning and
retain only the WebKit-prefixed "-webkit-tap-highlight-color" declaration;
update the rule so it only defines "-webkit-tap-highlight-color: rgba(251, 191,
36, 0.2);" and delete the plain "tap-highlight-color" line.


/* 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;
}

/* 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;
}
}

/* Optimize images */
img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
Comment on lines +411 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

Fix Biome duplicate image-rendering (the second line overrides the first).
Pick one value (or gate with @supports) to avoid inconsistent rendering.

 img {
-  image-rendering: -webkit-optimize-contrast;
-  image-rendering: crisp-edges;
+  image-rendering: -webkit-optimize-contrast;
 }
📝 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
/* Optimize images */
img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
/* Optimize images */
img {
image-rendering: -webkit-optimize-contrast;
}
🧰 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 411 to 415, there's a duplicate image-rendering
declaration where image-rendering: crisp-edges; overrides the prior
-webkit-optimize-contrast; fix by either choosing a single image-rendering value
(remove one of the two lines) or gate the vendor-specific property with a
@supports check—e.g., keep the standard image-rendering: crisp-edges; and wrap
-webkit-optimize-contrast in an @supports (-webkit-image-rendering:
optimize-contrast) { ... } (or the converse) so only the appropriate rule
applies and avoids conflicting overrides.


/* 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