Skip to content

Implement responsive design fixes in index.css #1378

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
Dippp10-ally wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Implement responsive design fixes in index.css #1378

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
317 changes: 317 additions & 0 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -671,3 +671,320 @@ html { scroll-behavior: smooth; }
}

/* fix/skip-to-main-content */

/* ==========================================================
RESPONSIVE FIXES
Append at the END of index.css
========================================================== */

/* Better responsive sizing */
*,
*::before,
*::after {
box-sizing: border-box;
}

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

img,
video,
canvas,
svg {
max-width: 100%;
height: auto;
display: block;
}

input,
textarea,
select,
button {
font: inherit;
}

/* Prevent horizontal scrolling */
html,
body {
overflow-x: hidden;
width: 100%;
}

/* Better responsive containers */
.container,
[class*="container"] {
width: 100%;
margin-inline: auto;
padding-inline: 1rem;
}

@media (min-width: 640px) {
.container,
[class*="container"] {
max-width: 640px;
}
}

@media (min-width: 768px) {
.container,
[class*="container"] {
max-width: 768px;
padding-inline: 1.5rem;
}
}

@media (min-width: 1024px) {
.container,
[class*="container"] {
max-width: 1024px;
padding-inline: 2rem;
}
}

@media (min-width: 1280px) {
.container,
[class*="container"] {
max-width: 1280px;
}
}

@media (min-width: 1536px) {
.container,
[class*="container"] {
max-width: 1440px;
}
}
Comment on lines +714 to +757

@coderabbitai coderabbitai Bot Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check for other classes containing "container" and existing tailwind container config
rg -nP 'className="[^"]*container[^"]*"' src --type=tsx -C1
fd -e js -e ts -e cjs tailwind.config

Repository: durdana3105/peer-learning

Length of output: 210

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n## src/index.css (around 714-757)\n'
sed -n '700,770p' src/index.css | cat -n

printf '\n## src/Communities.tsx lines with container className\n'
rg -n 'className=.*container' src/Communities.tsx -C 2 || true

printf '\n## tailwind config\n'
sed -n '1,220p' tailwind.config.ts | cat -n

Repository: durdana3105/peer-learning

Length of output: 7900

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n## files mentioning "container"\n'
rg -n --glob '!node_modules' --glob '!dist' --glob '!build' '\bcontainer\b' src app pages components -g '*.{ts,tsx,css}' -C 2 || true

printf '\n## file list for likely TSX entry points\n'
fd -e tsx -e ts -a src app pages components

printf '\n## CSS selectors around .container in generated/global CSS\n'
rg -n '^\s*(\.container|\[class\*="container"\])' src/index.css -C 1 || true

Repository: durdana3105/peer-learning

Length of output: 17246

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n## src/index.css around the later .container rule\n'
sed -n '920,940p' src/index.css | cat -n

printf '\n## ForgotPassword success-container markup/styles\n'
sed -n '200,330p' src/pages/ForgotPassword.tsx | cat -n

Repository: durdana3105/peer-learning

Length of output: 5191

Restrict the global container selector in src/index.css. [class*="container"] matches unrelated classes like .success-container, and the late .container rule overrides existing px-6 padding on sections that already use className="container ...". Limit this to a dedicated class or remove the attribute selector.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/index.css` around lines 714 - 757, The global container styling is too
broad because [class*="container"] matches unrelated classes and the .container
rules override existing section padding. Tighten the selector in index.css by
removing the attribute selector or replacing it with a dedicated container
class, and keep the responsive max-width behavior only for the intended
container element.


/* Responsive Typography */
h1 {
font-size: clamp(2rem, 5vw, 4.5rem);
line-height: 1.1;
}

h2 {
font-size: clamp(1.75rem, 4vw, 3.2rem);
line-height: 1.15;
}

h3 {
font-size: clamp(1.4rem, 3vw, 2.3rem);
}

h4 {
font-size: clamp(1.2rem, 2vw, 1.8rem);
}

p {
font-size: clamp(0.95rem, 1vw, 1.05rem);
}

/* Responsive sections */
section {
padding-block: clamp(3rem, 8vw, 7rem);
}

/* Glass cards */
.glass-card {
width: 100%;
overflow: hidden;
}

@media (max-width: 640px) {
.glass-card {
border-radius: 18px;
padding: 1rem;
}
}

/* Buttons */
.btn-primary {
min-height: 48px;
padding-inline: 1.5rem;
}

@media (max-width: 640px) {
.btn-primary {
width: 100%;
justify-content: center;
padding: 0.9rem 1.2rem;
font-size: 0.95rem;
}
}
Comment on lines +800 to +813

@coderabbitai coderabbitai Bot Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

justify-content: center is ineffective without a flex/grid display on .btn-primary.

Base .btn-primary doesn't set display: flex, and buttons default to inline-block, so justify-content has no effect here; only width: 100% actually applies on mobile.

🔧 Suggested fix 
 `@media` (max-width: 640px) {
   .btn-primary {
     width: 100%;
+    display: flex;
     justify-content: center;
     padding: 0.9rem 1.2rem;
     font-size: 0.95rem;
   }
 }
📝 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
/* Buttons */
.btn-primary {
min-height: 48px;
padding-inline: 1.5rem;
}
@media (max-width: 640px) {
.btn-primary {
width: 100%;
justify-content: center;
padding: 0.9rem 1.2rem;
font-size: 0.95rem;
}
}
/* Buttons */
.btn-primary {
min-height: 48px;
padding-inline: 1.5rem;
}
`@media` (max-width: 640px) {
.btn-primary {
width: 100%;
display: flex;
justify-content: center;
padding: 0.9rem 1.2rem;
font-size: 0.95rem;
}
}
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/index.css` around lines 800 - 813, The mobile `.btn-primary` rule uses
`justify-content: center`, but it has no effect unless the button is a flex or
grid container. Update the `.btn-primary` styles in the button section to set an
appropriate display mode (for example, flex) on the base rule or within the
mobile media query so the centering behavior actually applies, and keep the
existing width/padding adjustments intact.


/* Inputs */
.glass-input {
width: 100%;
}

/* Navigation */
.glass-nav {
width: 100%;
}

@media (max-width: 768px) {
.glass-nav {
padding-inline: 1rem;
}
}

/* Grid responsiveness */
.responsive-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

@media (max-width: 640px) {
.responsive-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}

/* Flex helpers */
.flex-responsive {
display: flex;
gap: 1.5rem;
}

@media (max-width: 768px) {
.flex-responsive {
flex-direction: column;
}
}

/* Responsive spacing */
.responsive-padding {
padding: clamp(1rem, 3vw, 3rem);
}

.responsive-margin {
margin: clamp(1rem, 3vw, 3rem);
}

/* Tables */
table {
width: 100%;
display: block;
overflow-x: auto;
white-space: nowrap;
}
Comment on lines +866 to +872

@coderabbitai coderabbitai Bot Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Map the CSS file and any table-related markup/usages.
git ls-files src/index.css
printf '\n--- index.css around table rules ---\n'
wc -l src/index.css
sed -n '830,900p' src/index.css

printf '\n--- search for table-related selectors/usages ---\n'
rg -n --context 2 '\btable\b|table-responsive|overflow-x|white-space:\s*nowrap|display:\s*block' src

Repository: durdana3105/peer-learning

Length of output: 12108

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n--- src/components/ui/table.tsx ---\n'
wc -l src/components/ui/table.tsx
sed -n '1,120p' src/components/ui/table.tsx

printf '\n--- any plain <table> usages outside the wrapper ---\n'
rg -n "<table|</table>" src --glob '!src/components/ui/table.tsx' --context 2

printf '\n--- table-related class usage in CSS ---\n'
rg -n "table-responsive|\btable\b" src/index.css src/components src/pages src/features src/hooks

Repository: durdana3105/peer-learning

Length of output: 2979

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n--- usages of the shared table component ---\n'
rg -n "from \"`@/components/ui/table`\"|from './components/ui/table'|from '../components/ui/table'|<Table|TableHead|TableBody|TableRow|TableCell|TableHeader|TableFooter|TableCaption" src

printf '\n--- raw table elements in TSX/JSX ---\n'
rg -n "<table|</table>" src --glob '*.tsx' --glob '*.jsx' --context 2

Repository: durdana3105/peer-learning

Length of output: 2184

Scope the overflow style to a wrapper. display: block on table removes native table layout, so any table using this rule loses browser column sizing. The shared table component already wraps <table> in an overflow container; move the scroll styles there and keep the table itself as display: table.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/index.css` around lines 866 - 872, The shared table styling is applying
overflow behavior directly to the table element, which breaks native column
layout. Update the table-related styles in the table component/CSS so the scroll
handling lives on the existing wrapper around the table, and keep the table
element itself using its normal table display. Use the table wrapper and the
table rule in the shared stylesheet to locate the change.


/* Code blocks */
pre {
overflow-x: auto;
}

/* Mobile adjustments */
@media (max-width: 640px) {

body {
font-size: 15px;
}

h1,
h2,
h3,
h4 {
word-break: break-word;
}
Comment on lines +886 to +891

@coderabbitai coderabbitai Bot Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Deprecated word-break: break-word flagged by stylelint.

Use overflow-wrap: break-word instead (already applied more broadly below at Lines 967-978), making this declaration redundant as well.

🔧 Suggested fix 
   h1,
   h2,
   h3,
   h4 {
-    word-break: break-word;
+    overflow-wrap: break-word;
   }
📝 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
h1,
h2,
h3,
h4 {
word-break: break-word;
}
h1,
h2,
h3,
h4 {
overflow-wrap: break-word;
}
🧰 Tools
🪛 Stylelint (17.14.0)

[error] 890-890: Deprecated keyword "break-word" for property "word-break" (declaration-property-value-keyword-no-deprecated)

(declaration-property-value-keyword-no-deprecated)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/index.css` around lines 886 - 891, The heading rule set in src/index.css
uses deprecated word-break: break-word, which stylelint flags and is now
redundant with the broader wrapping styles already applied later in the
stylesheet. Update the h1/h2/h3/h4 rule to use overflow-wrap: break-word
instead, and remove any duplicate wrapping declaration if the later global rule
already covers the same behavior; use the existing heading selector block as the
target for the change.

Source: Linters/SAST tools


.chip {
font-size: 0.72rem;
padding: 0.3rem 0.6rem;
}

.glass-button,
.btn-primary {
width: 100%;
}

.orb {
filter: blur(60px);
}

.shadow-neon-cyan,
.shadow-neon-purple {
box-shadow: none;
}
}

/* Tablets */
@media (min-width: 641px) and (max-width: 1023px) {

section {
padding-block: 5rem;
}

.glass-card {
padding: 1.5rem;
}
}

/* Large Screens */
@media (min-width: 1600px) {

body {
font-size: 18px;
}

.container,
[class*="container"] {
max-width: 1500px;
}

section {
padding-block: 8rem;
}
}

/* Landscape phones */
@media (max-height: 500px) and (orientation: landscape) {

section {
padding-block: 2rem;
}

h1 {
font-size: 2rem;
}
}

/* Better touch targets */
@media (pointer: coarse) {

button,
a,
input,
textarea,
select {
min-height: 44px;
}
}
Comment on lines +954 to +964

@coderabbitai coderabbitai Bot Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Touch-target min-height on a has no effect for default inline anchors.

min-height doesn't apply to non-replaced inline elements. Since a defaults to display: inline, this rule is a no-op unless nav links already use inline-block/flex.

🔧 Suggested fix 
   button,
   a,
   input,
   textarea,
   select {
     min-height: 44px;
+    display: inline-flex;
+    align-items: center;
   }
📝 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
/* Better touch targets */
@media (pointer: coarse) {
button,
a,
input,
textarea,
select {
min-height: 44px;
}
}
/* Better touch targets */
`@media` (pointer: coarse) {
button,
a,
input,
textarea,
select {
min-height: 44px;
display: inline-flex;
align-items: center;
}
}
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/index.css` around lines 954 - 964, The touch-target rule in the
coarse-pointer media query is ineffective for default inline anchors because `a`
does not honor `min-height` when left as inline. Update the `@media (pointer:
coarse)` block in `index.css` so anchor links are given a non-inline display
such as `inline-block` or `flex` where needed, or scope the touch-target sizing
to anchors that already use a supported layout. Keep the `button`, `input`,
`textarea`, and `select` behavior unchanged.


/* Prevent overflowing text */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div {
overflow-wrap: break-word;
word-wrap: break-word;
}
Comment on lines +966 to +978

@coderabbitai coderabbitai Bot Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Deprecated word-wrap property flagged by stylelint; also duplicates overflow-wrap on the same line group.

overflow-wrap is already declared immediately above; the word-wrap fallback line is unnecessary and deprecated.

🔧 Suggested fix 
   overflow-wrap: break-word;
-  word-wrap: break-word;
 }
📝 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
/* Prevent overflowing text */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div {
overflow-wrap: break-word;
word-wrap: break-word;
}
/* Prevent overflowing text */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div {
overflow-wrap: break-word;
}
🧰 Tools
🪛 Stylelint (17.14.0)

[error] 977-977: Expected "word-wrap" to be "overflow-wrap" (property-no-deprecated)

(property-no-deprecated)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/index.css` around lines 966 - 978, The global text-wrapping rule in the
`src/index.css` selector group uses the deprecated `word-wrap` fallback
redundantly alongside `overflow-wrap`; remove the `word-wrap: break-word`
declaration from the shared heading/paragraph/span/div rule and keep
`overflow-wrap: break-word` as the single wrapping property.

Source: Linters/SAST tools


/* Utility */
.full-width-mobile {
width: 100%;
}

@media (min-width: 768px) {
.full-width-mobile {
width: auto;
}
}