diff --git a/application/frontend/src/pages/CommonRequirementEnumeration/commonRequirementEnumeration.scss b/application/frontend/src/pages/CommonRequirementEnumeration/commonRequirementEnumeration.scss index 2c92d5c5c..f650ccd28 100644 --- a/application/frontend/src/pages/CommonRequirementEnumeration/commonRequirementEnumeration.scss +++ b/application/frontend/src/pages/CommonRequirementEnumeration/commonRequirementEnumeration.scss @@ -72,3 +72,21 @@ } } + +@media (max-width: 768px) { + .cre-page { + padding: 1rem; /* Reduce from 30px to prevent content touching edges */ + + &__description { + width: 100%; /* Expand from 50% - too narrow on small screens */ + } + + &__heading { + font-size: 1.5rem; /* Reduce from 2rem - oversized on mobile */ + } + + &__sub-heading { + font-size: 1rem; /* Reduce from 1.2rem - proportional for mobile */ + } + } +} diff --git a/application/frontend/src/pages/Explorer/explorer.scss b/application/frontend/src/pages/Explorer/explorer.scss index dae6bf27a..384671509 100644 --- a/application/frontend/src/pages/Explorer/explorer.scss +++ b/application/frontend/src/pages/Explorer/explorer.scss @@ -110,3 +110,18 @@ main#explorer-content { flex-direction: column; } } +@media (max-width: 768px) { + main#explorer-content { + padding: 1rem; /* Reduce from 30px to prevent content touching edges */ + + .search-field { + input { + width: 100%; /* Expand from fixed 320px - overflows on small screens */ + } + } + + .item { + margin: 4px 4px 4px 1rem; /* Reduce from 40px left margin on mobile */ + } + } +} diff --git a/application/frontend/src/pages/GapAnalysis/GapAnalysis.scss b/application/frontend/src/pages/GapAnalysis/GapAnalysis.scss index d15bf0089..feccf0672 100644 --- a/application/frontend/src/pages/GapAnalysis/GapAnalysis.scss +++ b/application/frontend/src/pages/GapAnalysis/GapAnalysis.scss @@ -15,3 +15,8 @@ main#gap-analysis { } } } +@media (max-width: 768px) { + main#gap-analysis { + padding: 1rem; /* Reduce from 30px to prevent content touching edges */ + } +} diff --git a/application/frontend/src/pages/Search/components/SearchBar.scss b/application/frontend/src/pages/Search/components/SearchBar.scss index a30781246..4800c4a37 100644 --- a/application/frontend/src/pages/Search/components/SearchBar.scss +++ b/application/frontend/src/pages/Search/components/SearchBar.scss @@ -26,7 +26,8 @@ } input { padding: 0.5rem 1rem 0.5rem 2.5rem; - width: 16rem; + width: 100%; + max-width: 16rem; background-color: rgba(var(--card-rgb), 0.5); /* tiny bump */ border: 1px solid rgba(102, 157, 246, 0.267); /* slightly brighter sky blue */ @@ -55,6 +56,6 @@ .search-error { margin-top: 0.25rem; font-size: 0.75rem; - color: #f87171; // red-400 + color: #f87171; /* red-400 */ } } diff --git a/application/frontend/src/pages/Standard/standard.scss b/application/frontend/src/pages/Standard/standard.scss index caa635923..e7c6496e6 100644 --- a/application/frontend/src/pages/Standard/standard.scss +++ b/application/frontend/src/pages/Standard/standard.scss @@ -32,3 +32,16 @@ word-break: break-word; } } +@media (max-width: 768px) { + .standard-page { + padding: 1rem; /* Reduce from 30px to prevent content touching edges */ + + &__heading { + font-size: 1.5rem; /* Reduce from 2rem - oversized on mobile */ + } + + &__sub-heading { + font-size: 1rem; /* Reduce from 1.2rem - proportional for mobile */ + } + } +} diff --git a/application/frontend/src/pages/chatbot/chatbot.scss b/application/frontend/src/pages/chatbot/chatbot.scss index 0d0d2f501..efd733b3a 100644 --- a/application/frontend/src/pages/chatbot/chatbot.scss +++ b/application/frontend/src/pages/chatbot/chatbot.scss @@ -270,7 +270,7 @@ h1.ui.header.chatbot-title { margin-top: 1rem; background-color: #daebdb; - // background: transparent; +/* background: transparent; */ border: 1px solid rgb(190, 214, 232); padding: 0.75rem; border-radius: 12px; @@ -399,7 +399,7 @@ h1.ui.header.chatbot-title { flex-direction: column; height: 100%; - background: #fcfcfa; // same palette as input + background: #fcfcfa; /* same palette as input */ backdrop-filter: blur(6px); border-radius: 18px; diff --git a/application/frontend/src/scaffolding/Header/header.scss b/application/frontend/src/scaffolding/Header/header.scss index 50cf72531..3e51fc316 100644 --- a/application/frontend/src/scaffolding/Header/header.scss +++ b/application/frontend/src/scaffolding/Header/header.scss @@ -45,6 +45,15 @@ width: 10rem; display: block; } + + @media (max-width: 767px) { + margin-left: 1rem; + img { + width: auto; + max-width: 7rem; + height: 3rem; + } + } } .navbar__desktop-links { @@ -322,3 +331,17 @@ display: block; } } + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + clip-path: inset(50%); + white-space: nowrap; + border: 0; +} + diff --git a/application/static/assets/scss/pixel/layout/_navbar.scss b/application/static/assets/scss/pixel/layout/_navbar.scss index 6412eab7c..276b23ed0 100644 --- a/application/static/assets/scss/pixel/layout/_navbar.scss +++ b/application/static/assets/scss/pixel/layout/_navbar.scss @@ -444,3 +444,28 @@ animation: hide-navbar-collapse .2s ease forwards; } } +/* Fix Navbar Logo Overflow & Mobile Padding (Issue #691) */ +@media (max-width: 767px) { + .navbar-brand { + img { + height: 2.5rem; /* Shrink from ~10rem equivalent / 40px base */ + width: auto; + max-width: 8rem; /* Prevent overflow on small screens */ + } + margin-left: 1rem !important; /* Reduce left margin from 4rem */ + margin-right: 1rem; /* Balance spacing */ + } + + .navbar-main { + padding: 0.5rem 1rem; /* Add mobile padding to main navbar to avoid edge-touching */ + } + + .nav-item { + margin-left: 0.5rem; /* Reduce item spacing on mobile for better fit */ + margin-right: 0.5rem; + } + + .navbar-toggler { + margin-right: 0.5rem; /* Better touch target & spacing */ + } +} diff --git a/application/utils/gap_analysis.py b/application/utils/gap_analysis.py index da2bc246e..9e3dab04d 100644 --- a/application/utils/gap_analysis.py +++ b/application/utils/gap_analysis.py @@ -129,6 +129,13 @@ def schedule(standards: List[str], database): logger.info(f"Gap analysis result for {standards_hash} does not exist") conn = redis.connect() + if conn is None: + logger.error( + "Redis is not available. Please run 'make start-containers' first." + ) + return { + "error": "Redis is not available. Please run 'make start-containers' first." + } gap_analysis_results = conn.get(standards_hash) if ( gap_analysis_results diff --git a/docs/developmentSetup.md b/docs/developmentSetup.md index ae0fda6a5..501f8f322 100644 --- a/docs/developmentSetup.md +++ b/docs/developmentSetup.md @@ -113,6 +113,10 @@ You can run `make migrate-upgrade` first and then `make upstream-sync` ## Running locally +First, start the required services (Redis and Neo4j) with: + +`make start-containers` + You can run the backend with `make dev-flask`. At the time of writing the backend URL is `http://localhost:5000` by default. You can run the frontend with `yarn start`. This should open a browser tab at the application's front page and also automatically reload the page whenever changes are detected. At the time of writing the frontend URL is `http://localhost:9001` by default.