Skip to content

fix(ui): responsivness of kmesh website #275

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

Merged
kmesh-bot merged 1 commit into from
Feb 25, 2026
Merged

fix(ui): responsivness of kmesh website #275

Show file tree
Hide file tree
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
66 changes: 65 additions & 1 deletion src/components/About/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,74 @@
margin: 0px 0 10px 0;
}
}

@media (max-width: 435px) {
.row {
.description {
flex: 0 0 66.666667%;
max-width: 66.666667%;
font-size: 1rem;
}

.name {
font-size: 1.5em;
font-weight: 400;
margin: 20px 0 10px 0;
}

.jobTitle {
font-size: 0.5rem;
font-weight: 300;
margin: 0px 0 10px 0;
}
}
}

@media (max-width: 1024px) {
.row {
.description {
font-size: 1rem;
}
.name {
font-size: 1.5em;
}
.jobTitle {
font-size: 0.7rem;
}
}
Comment on lines +71 to +104
Copy link

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

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

The @media (max-width: 1024px) block comes after the more specific @media (max-width: 435px) block, so at <=435px the later rules override the intended small-screen tweaks (e.g., .jobTitle becomes 0.7rem instead of 0.5rem). Reorder the media queries (smallest last) or add a min-width range so the <=435px overrides actually win.

Copilot uses AI. Check for mistakes.
}

@media (min-width: 1300px) and (max-width: 1515px) {
.row {
.description {
font-size: 1.1rem;
}
.name {
font-size: 1.8em;
}
.jobTitle {
font-size: 0.9rem;
}
}
}

@media (max-width: 1300px) {
.row {
.description {
font-size: 1.1rem;
}
.name {
font-size: 1.8em;
}
.jobTitle {
font-size: 0.9rem;
}
}
Comment on lines +107 to +132
Copy link

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

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

These two media queries apply the same font-size values and overlap at exactly 1300px. Consider consolidating into non-overlapping ranges (or a single rule with clearer breakpoints) to avoid redundant overrides and make future adjustments less error-prone.

Copilot uses AI. Check for mistakes.
}
Comment on lines +107 to +133
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Feb 24, 2026

Choose a reason for hiding this comment

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

high

The media queries added here have issues with redundancy and ordering, which causes incorrect styling. The @media (max-width: 1300px) block is redundant as it contains the same styles as the (min-width: 1300px) and (max-width: 1515px) block. More critically, because it appears last in the source order, it overrides the more specific styles for max-width: 1024px and max-width: 435px, breaking the responsive design for smaller screens. Please refactor these queries to have clear, non-overlapping ranges or ensure they are ordered correctly (e.g., from largest max-width to smallest).

}

html[data-theme="dark"] {
.aboutContainer {
background-color: #242526;
}
}
}
106 changes: 67 additions & 39 deletions src/components/slider/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,24 +19,18 @@

&.left {
align-items: flex-start;

.title {
text-align: left;
}
}

&.right {
align-items: flex-end;

.title {
text-align: right;
}
}

&.center {
align-items: centers;
justify-content: center;

align-items: center;
.title {
text-align: center;
}
Expand All @@ -46,34 +40,30 @@
color: white;
}

.button {
a {
display: block;
cursor: pointer;
font-size: 1.1rem;
font-weight: 400;
color: #0039cb;
padding: 0.5em 2.1em;
background-color: #f8f9fa;
border-color: #f8f9fa;
border-radius: 0.4rem;
text-decoration: none;
user-select: none;
transition: color 0.15s ease-in-out,
background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;

&:hover {
background-color: #e2e6ea;
border-color: #dae0e5;
}
.button a {
display: block;
cursor: pointer;
font-size: 1.1rem;
font-weight: 400;
color: #0039cb;
padding: 0.5em 2.1em;
background-color: #f8f9fa;
border-color: #f8f9fa;
border-radius: 0.4rem;
text-decoration: none;
user-select: none;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out;
&:hover {
background-color: #e2e6ea;
border-color: #dae0e5;
}
}

.main-title {
font-size: 2.7rem;
text-align: inherit;
}

.sub-title {
font-size: 1.35rem;
text-align: inherit;
Expand All @@ -85,30 +75,68 @@
width: 15%;
z-index: 1;
}

.slick-prev {
position: position;
left: 0;
}

.slick-next {
position: position;
right: 0;
}

.slick-dots {
bottom: 10px;
}
}

@media (max-width: 768px) {
.slick-slider {
.slick-item {
padding-right: 20px;
padding-left: 20px;
margin: 0 0.25rem;
@media (max-width: 1230px) and (min-width: 993px){
Copy link

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

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

Formatting nit: this media query is missing a space before { (compare other media queries in this repo, e.g. src/components/sectionContainer/styles.scss:26 and src/components/About/styles.scss:5, which use ) {). Aligning the formatting helps keep future diffs smaller.

Suggested change
@media (max-width: 1230px) and (min-width: 993px){
@media (max-width: 1230px) and (min-width: 993px) {

Copilot uses AI. Check for mistakes.
.slick-slider .slick-item {
.main-title {
font-size: 2rem;
}
.sub-title {
font-size: 1.3rem;
}
}
}

@media (max-width: 992px) {
.slick-slider .slick-item {
.main-title {
font-size: 2rem;
}
.sub-title {
font-size: 1.3rem;
}
}
}
Comment on lines +89 to +109
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Feb 24, 2026

Choose a reason for hiding this comment

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

medium

These two media queries for (max-width: 1230px) and (min-width: 993px) and (max-width: 992px) have identical styles. Since their ranges are contiguous, they can be combined into a single, simpler media query to improve readability and maintainability.

Suggested change
@media (max-width: 1230px) and (min-width: 993px){
.slick-slider .slick-item {
.main-title {
font-size: 2rem;
}
.sub-title {
font-size: 1.3rem;
}
}
}
@media (max-width: 992px) {
.slick-slider .slick-item {
.main-title {
font-size: 2rem;
}
.sub-title {
font-size: 1.3rem;
}
}
}
@media (max-width: 1230px) {
.slick-slider .slick-item {
.main-title {
font-size: 2rem;
}
.sub-title {
font-size: 1.3rem;
}
}
}

Comment on lines +89 to +109
Copy link

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

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

The (max-width: 1230px) and (min-width: 993px) and (max-width: 992px) media queries set identical .main-title/.sub-title sizes. This duplication makes it easy for the breakpoints to drift; consider merging into a single @media (max-width: 1230px) rule (and then override again only where sizes actually change).

Copilot uses AI. Check for mistakes.

@media (max-width: 768px) and (min-width: 565px) {
.slick-slider .slick-item {
.main-title {
font-size: 1.4rem;
}
.sub-title {
font-size: 1rem;
}
margin-left: auto;
margin-right: auto;
}
}

@media (max-width: 564px) {
.slick-slider .slick-item {
.main-title {
font-size: 1.4rem;
}
.sub-title {
font-size: 1rem;
}
}
}
Comment on lines +111 to +133
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Feb 24, 2026

Choose a reason for hiding this comment

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

medium

The font-size rules are duplicated across these two media queries. You can combine them into a single (max-width: 768px) query to avoid repetition, and keep the margin rules in their specific range for better maintainability.

  @media (max-width: 768px) {
    .slick-slider .slick-item {
      .main-title {
        font-size: 1.4rem;
      }
      .sub-title {
        font-size: 1rem;
      }
    }
  }

  @media (max-width: 768px) and (min-width: 565px) {
    .slick-slider .slick-item {
      margin-left: auto;
      margin-right: auto;
    }
  }


@media (max-width: 768px) {
.slick-slider .slick-item {
padding-right: 20px;
padding-left: 20px;
margin: 0 0.25rem;
.title {
text-align: center;
}
Expand Down
38 changes: 38 additions & 0 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,3 +130,41 @@
width: 100%;
height: 100%;
}

/* 997 px – 1245 px : ONLY logo + toggle + search */
@media (min-width: 997px) and (max-width: 1245px) {
/* hide all navbar links except the logo image */
.navbar__item:not(.navbar__logo):not(img),
.navbar__link:not(.navbar__logo):not(img) {
display: none !important;
}

/* make sure logo, toggle, search stay visible */
.navbar__logo,
.navbar__logo img,
.navbar__toggle,
.navbar__search,
.DocSearch-Button {
display: inline-block !important;
}

/* push logo to the far left */
.navbar__brand {
margin-right: auto;
}

/* tidy sizes */
.navbar__logo { height: 1.8rem; }
.navbar__title { font-size: 1.1rem; }
}

/* mobile sidebar : social icons in a ROW */
@media (max-width: 996px) {
.navbar-sidebar__items .navbar__items--right,
.navbar-sidebar__items .navbar__items--right .navbar__item {
display: flex !important;
flex-direction: row !important;
gap: 0.75rem; /* space between icons */
align-items: center;
}
}
Comment on lines +135 to +170
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Feb 24, 2026

Choose a reason for hiding this comment

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

medium

The use of !important is generally discouraged as it can lead to maintenance issues and make debugging styles harder. It's present in both new media queries (lines 139, 148, 165, 166). While sometimes necessary to override library styles like those in Docusaurus, it's worth investigating if you can achieve the same result by increasing selector specificity. This would make the CSS more robust and easier to reason about.

Loading