Skip to content

3626: fix:improve footer responsiveness on smaller screens #29

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

3626: fix:improve footer responsiveness on smaller screens #29

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
33 changes: 33 additions & 0 deletions doc/assets/scss/_styles_project.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,36 @@
.navbar-brand {
font-family: "PT Mono", monospace;
}

@media (max-width: 996px) {
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist bot Jan 22, 2026

Choose a reason for hiding this comment

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

medium

The breakpoint 996px is very close to Bootstrap's standard lg breakpoint of 992px. To maintain consistency with the framework's grid system and improve predictability, it's better to use standard breakpoints unless there's a specific reason for this custom value. Consider changing 996px to 992px.

Suggested change
@media (max-width: 996px) {
@media (max-width: 992px) {

Copy link
Copy Markdown
Owner Author

@martin-augment martin-augment Jan 22, 2026

Choose a reason for hiding this comment

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

value:useful; category:bug; feedback:The Gemini AI reviewer is correct! The website is based on the Bootstrap CSS framework and it would be good to use the same breakpoint values as it, i.e. 992px. Prevents inconsistency and wrong behavior of the website rendering between 992-996px width.


footer .row {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

footer [class^="col-"] {
Copy link
Copy Markdown

@augmentcode augmentcode bot Jan 22, 2026

Choose a reason for hiding this comment

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

footer [class^="col-"] only matches elements whose first class starts with col-; if footer columns have other classes before the Bootstrap col-* class, these rules won’t apply and the layout may still break on small screens.

Fix This in Augment

🤖 Was this useful? React with 👍 or 👎

Copy link
Copy Markdown
Owner Author

@martin-augment martin-augment Jan 22, 2026

Choose a reason for hiding this comment

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

value:useful; category:bug; feedback:The Augment AI reviewer is correct! The CSS selector would match "col-*" only if it is the very first CSS class token and it won't match if is the second one or later. To make it future-proof the selector should be changed to [class*="col-"] or it should be made sure that such classes are always used first. Prevents silent breaks in the CSS due to non-matching selector.

width: 100% !important;
max-width: 100% !important;
text-align: center !important;
Comment on lines +47 to +49
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist bot Jan 22, 2026

Choose a reason for hiding this comment

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

medium

Using !important should be avoided as it breaks the natural CSS cascade and makes styles harder to maintain. While it might be necessary for text-align to override Bootstrap's utility classes (e.g., .text-right), it's likely not needed for width and max-width. The selector footer [class^="col-"] should have enough specificity to override the base column styles. Consider removing !important from width and max-width for better maintainability.

Suggested change
width: 100% !important;
max-width: 100% !important;
text-align: center !important;
width: 100%;
max-width: 100%;
text-align: center !important;

Copy link
Copy Markdown
Owner Author

@martin-augment martin-augment Jan 22, 2026

Choose a reason for hiding this comment

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

value:good-to-have; category:bug; feedback:The Gemini AI reviewer is correct! Usage of "!important" should be avoided if possible because otherwise it is impossible to overwrite the rules elsewhere. It is better to use more specific CSS rule selectors

margin-bottom: 1.25rem;
}
Comment on lines +46 to +51
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Jan 22, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Make the column selector robust to non-leading col-* classes.

[class^="col-"] won’t match when col-* isn’t the first class token (e.g., class="footer-col col-md-4"), so the mobile widths won’t apply for those elements.

🔧 Suggested tweak 
-  footer [class^="col-"] {
+  footer .row > [class^="col-"],
+  footer .row > [class*=" col-"] {
     width: 100% !important;
     max-width: 100% !important;
     text-align: center !important;
     margin-bottom: 1.25rem;
   }
📝 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
footer [class^="col-"] {
width: 100% !important;
max-width: 100% !important;
text-align: center !important;
margin-bottom: 1.25rem;
}
footer .row > [class^="col-"],
footer .row > [class*=" col-"] {
width: 100% !important;
max-width: 100% !important;
text-align: center !important;
margin-bottom: 1.25rem;
}
🤖 Prompt for AI Agents 
In `@doc/assets/scss/_styles_project.scss` around lines 46 - 51, Replace the
selector footer [class^="col-"] with footer [class*="col-"] in
_styles_project.scss so the rule matches elements whose class list contains a
token starting with "col-" even when it's not the first class token; update the
selector used in that rule (footer [class^="col-"]) accordingly to ensure mobile
widths apply for classes like "footer-col col-md-4".

Copy link
Copy Markdown
Owner Author

@martin-augment martin-augment Jan 22, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

value:useful; category:bug; feedback:The CodeRabbit AI reviewer is correct! The CSS selector would match "col-*" only if it is the very first CSS class token and it won't match if is the second one or later. To make it future-proof the selector should be changed to [class*="col-"] or it should be made sure that such classes are always used first. Prevents silent breaks in the CSS due to non-matching selector.


footer ul.list-inline {
display: flex;
justify-content: center;
flex-wrap: wrap;
}

footer ul.list-inline li {
margin: 0.4rem;
}

footer img {
margin-left: auto;
margin-right: auto;
display: block;
}
Comment on lines +63 to +67
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist bot Jan 22, 2026

Choose a reason for hiding this comment

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

medium

This rule for footer img appears to be redundant. The parent column element ([class^="col-"]) already has text-align: center applied, which should center the image since it's an inline element by default. You can likely remove this entire block for cleaner and more maintainable code.

Copy link
Copy Markdown
Owner Author

@martin-augment martin-augment Jan 22, 2026

Choose a reason for hiding this comment

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

value:useful; category:bug; feedback:The Gemini AI reviewer is correct! There is no need to center inline elements like <img> since their parent (the column) have CSS rules to center their contents. Prevents adding more CSS code than needed and increase the maintenance cost.

}
Copy link
Copy Markdown

@augmentcode augmentcode bot Jan 22, 2026

Choose a reason for hiding this comment

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

This file now ends without a trailing newline (shown by \ No newline at end of file), which can cause noisy diffs and issues with some tooling.

Fix This in Augment

🤖 Was this useful? React with 👍 or 👎

Copy link
Copy Markdown
Owner Author

@martin-augment martin-augment Jan 22, 2026

Choose a reason for hiding this comment

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

value:good-to-have; category:bug; feedback:The Augment AI reviewer is correct! The POSIX standard recommends all text files to end with an empty new line. Prevents potential problems with tools which expect a newline at the end of the text files.