Fix responsive design issues on mobile devices (Fixes #691)#764
Merged
northdpole merged 9 commits intoOWASP:mainfrom Feb 27, 2026
Merged
Fix responsive design issues on mobile devices (Fixes #691)#764northdpole merged 9 commits intoOWASP:mainfrom
northdpole merged 9 commits intoOWASP:mainfrom
Conversation
…ce fixed width: 16rem with width: 100%; max-width: 16rem - Input now shrinks gracefully on small screens (320px-375px) - Desktop appearance preserved via max-width cap - Fix duplicate background-color declaration - Fix invalid // comment syntax in .search-error rule Part of OWASP#691 Signed-off-by: Rashmi Vemuri <rashmivemuri@gmail.com>
…height value (removed stray word "consideration") - Fix invalid // comment syntax in .chat-input and .chat-surface Part of OWASP#691 Signed-off-by: Rashmi Vemuri <rashmivemuri@gmail.com>
Added styles to fix navbar logo overflow and adjust mobile padding and margins. Signed-off-by: Rashmi Vemuri <rashmivemuri@gmail.com>
…P#691) Signed-off-by: Rashmi Vemuri <rashmivemuri@gmail.com>
Added responsive styles for mobile view. Problem: - .cre-page had no mobile media queries at all - padding: 30px with no mobile override causes content to touch screen edges on small devices - width: 50% on __description creates a ~187px wide text column on 375px screens, making content very cramped - font sizes (2rem heading, 1.2rem sub-heading) are oversized for mobile viewports Fix: - Added @media (max-width: 768px) block at bottom of file - Reduced padding to 1rem on mobile - Expanded __description width to 100% on mobile - Reduced __heading font-size from 2rem to 1.5rem - Reduced __sub-heading font-size from 1.2rem to 1rem Desktop layout is completely untouched. Only fires on screens 768px and below. Signed-off-by: Rashmi Vemuri <rashmivemuri@gmail.com>
…Part of OWASP#691) Adjusted styles for mobile responsiveness, including padding and width changes for search field and item margins. Problem: - main#explorer-content had padding: 30px with no mobile override - search input fixed at 320px overflows on screens < 375px - .item had margin-left: 40px causing content overflow on mobile Fix: - Added @media (max-width: 768px) block at bottom of file - Reduced padding to 1rem on mobile - Expanded search input width to 100% on mobile - Reduced .item left margin to 1rem on mobile Desktop layout completely untouched. Signed-off-by: Rashmi Vemuri <rashmivemuri@gmail.com>
Problem: - .standard-page had padding: 30px with no mobile override - font sizes (2rem heading, 1.2rem sub-heading) are oversized for mobile viewports - existing media query only handled word-break, not padding or font sizes Fix: - Added @media (max-width: 768px) block at bottom of file - Reduced padding to 1rem on mobile - Reduced __heading font-size from 2rem to 1.5rem - Reduced __sub-heading font-size from 1.2rem to 1rem Desktop layout completely untouched. Signed-off-by: Rashmi Vemuri <rashmivemuri@gmail.com>
Adjusted padding for gap analysis on smaller screens. Signed-off-by: Rashmi Vemuri <rashmivemuri@gmail.com>
Signed-off-by: Rashmi Vemuri <rashmivemuri@gmail.com>
northdpole
approved these changes
Feb 27, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fix responsive design issues reported in #691 that negatively
impact the mobile user experience on OpenCRE.
Changes Made
1. Navbar Logo Overflow
Files:
application/static/assets/scss/pixel/layout/_navbar.scssapplication/frontend/src/scaffolding/Header/header.scssProblem: Logo had fixed size with margin-left: 4rem causing
horizontal overflow on screens < 375px.
Fix: Add mobile media query reducing margin-left to 1rem and
constrain image width with max-width: 7rem on mobile.
2. Chatbot Message Cards Too Wide
File:
application/frontend/src/pages/chatbot/chatbot.scssProblem: Message cards had fixed max-width: 65% leaving
insufficient margin on small screens. Also contained invalid
CSS syntax.
Fix: Fix CSS syntax errors and add responsive breakpoints:
3. Search Bar Fixed Width
File:
application/frontend/src/pages/Search/components/SearchBar.scssProblem: Search input had fixed width: 16rem that did not
adapt to smaller screens.
Fix: Change to width: 100% with max-width: 16rem to allow
fluid behavior on mobile while preserving desktop appearance.
4. Hero Section Logo (margin-right: 5rem)
No changes made.
After thorough investigation of all relevant files, the property
margin-right: 5rem referenced in the issue does not exist in the
current codebase. The only margin-related logo issue found was
margin-left: 4rem which is fixed under change #1 above.
5. Missing Mobile-Specific Padding
Files:
application/frontend/src/pages/CommonRequirementEnumeration/commonRequirementEnumeration.scssapplication/frontend/src/pages/Explorer/explorer.scssapplication/frontend/src/pages/Standard/standard.scssapplication/frontend/src/pages/GapAnalysis/GapAnalysis.scssProblem: Multiple pages had padding: 30px with no mobile
override, fixed font sizes too large for mobile, and Explorer
search input fixed at 320px causing overflow.
Fix: Add @media (max-width: 768px) to all affected pages:
Testing
Screenshots (320px mobile view)
Before (live site):
After (PR fixes applied):
Closes #691