Skip to content

Optimize header layout performance with flexbox mixins #6

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
ShashankFC wants to merge 1 commit into
base: header-layout-optimization-pre
Choose a base branch
from
Open

Optimize header layout performance with flexbox mixins #6

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
9 changes: 5 additions & 4 deletions app/assets/stylesheets/common/base/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,9 @@

.contents {
margin: 8px 0;
}

.title {
float: left;
@include flexbox();
@include align-items(center);
}

.valign-helper {
Expand All @@ -34,8 +33,10 @@
}

.panel {
float: right;
position: relative;
margin-left: auto;

@include order(3);
}

.login-button, button.sign-up-button {
Expand Down
9 changes: 5 additions & 4 deletions app/assets/stylesheets/common/base/topic-post.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,9 @@ table.md-table {
}

.small-action {
@include flexbox();

@cubic-dev-ai cubic-dev-ai Bot Feb 13, 2026 •
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2: Adding display: flex to .small-action makes the float declarations on its children (.topic-avatar, .avatar, button) dead code—per the CSS spec, float has no effect on flex items. These should be removed to avoid confusion and ensure the layout relies solely on flexbox properties (e.g., use margin-left: auto on button instead of float: right to push it to the right). The clear: both on .small-action itself is also now unnecessary.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At app/assets/stylesheets/common/base/topic-post.scss, line 264:

<comment>Adding `display: flex` to `.small-action` makes the `float` declarations on its children (`.topic-avatar`, `.avatar`, `button`) dead code—per the CSS spec, `float` has no effect on flex items. These should be removed to avoid confusion and ensure the layout relies solely on flexbox properties (e.g., use `margin-left: auto` on `button` instead of `float: right` to push it to the right). The `clear: both` on `.small-action` itself is also now unnecessary.</comment>

<file context>
@@ -261,6 +261,9 @@ table.md-table {
 }
 
 .small-action {
+  @include flexbox();
+  @include align-items(center);
+
</file context>
Fix with Cubic

@include align-items(center);

.topic-avatar {
padding: 5px 0;
border-top: none;
Expand All @@ -274,8 +277,7 @@ table.md-table {
}

.small-action-desc {
padding: 0.5em 0 0.5em 4em;
margin-top: 5px;
padding: 0 1.5%;
text-transform: uppercase;
font-weight: bold;
font-size: 0.9em;
Expand All @@ -287,7 +289,7 @@ table.md-table {
font-weight: normal;
font-size: 14px;
p {
margin: 5px 0;
margin: 0;
}
}

Expand All @@ -298,7 +300,6 @@ table.md-table {

> p {
margin: 0;
padding-top: 4px;
}
}

Expand Down
6 changes: 3 additions & 3 deletions app/assets/stylesheets/common/base/topic.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@
}

.extra-info-wrapper {
@include order(2);

line-height: 1.5;
.badge-wrapper {
float: left;
&.bullet {
margin-top: 5px;
}
}

}
Expand Down
6 changes: 4 additions & 2 deletions app/assets/stylesheets/common/components/badges.css.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,10 @@


&.bullet { //bullet category style
display: inline-flex;
align-items: baseline;
@include inline-flex();

@include align-items(baseline);

margin-right: 10px;

span.badge-category {
Expand Down
37 changes: 37 additions & 0 deletions app/assets/stylesheets/common/foundation/mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,3 +92,40 @@
-moz-user-select: none;
-ms-user-select: none;
}

// ---------------------------------------------------

//Flexbox

@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

@mixin inline-flex() {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}


@mixin align-items($alignment) {
-webkit-box-align: $alignment;

@cubic-dev-ai cubic-dev-ai Bot Feb 13, 2026 •
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2: The old flexbox syntax (-webkit-box-align, -ms-flex-align) uses different alignment values than the standard. Passing flex-start/flex-end directly won't work — old browsers expect start/end. If these prefixes are needed, the mixin should map values (e.g., strip the flex- prefix for legacy properties). If old browser support isn't required, consider dropping the legacy prefixes entirely and using Autoprefixer instead.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At app/assets/stylesheets/common/foundation/mixins.scss, line 118:

<comment>The old flexbox syntax (`-webkit-box-align`, `-ms-flex-align`) uses different alignment values than the standard. Passing `flex-start`/`flex-end` directly won't work — old browsers expect `start`/`end`. If these prefixes are needed, the mixin should map values (e.g., strip the `flex-` prefix for legacy properties). If old browser support isn't required, consider dropping the legacy prefixes entirely and using Autoprefixer instead.</comment>

<file context>
@@ -92,3 +92,40 @@
+
+
+@mixin align-items($alignment) {
+    -webkit-box-align: $alignment;
+    -webkit-align-items: $alignment;
+    -ms-flex-align: $alignment;  
</file context>
Fix with Cubic

-webkit-align-items: $alignment;
-ms-flex-align: $alignment;
-ms-align-items: $alignment;

@cubic-dev-ai cubic-dev-ai Bot Feb 13, 2026 •
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2: -ms-align-items is not a valid CSS property and will be silently ignored. The correct IE10 prefix (-ms-flex-align) is already included on the line above. Remove this invalid property.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At app/assets/stylesheets/common/foundation/mixins.scss, line 121:

<comment>`-ms-align-items` is not a valid CSS property and will be silently ignored. The correct IE10 prefix (`-ms-flex-align`) is already included on the line above. Remove this invalid property.</comment>

<file context>
@@ -92,3 +92,40 @@
+    -webkit-box-align: $alignment;
+    -webkit-align-items: $alignment;
+    -ms-flex-align: $alignment;  
+    -ms-align-items: $alignment;
+    align-items:$alignment;
+}
</file context>
Fix with Cubic

align-items:$alignment;
}

@mixin order($val) {
-webkit-box-ordinal-group: $val;

@cubic-dev-ai cubic-dev-ai Bot Feb 13, 2026 •
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2: -webkit-box-ordinal-group is 1-based while order is 0-based. Passing the same value directly produces off-by-one ordering in old WebKit. The value should be $val + 1 for the legacy property, or drop the legacy prefix if old browser support is unnecessary.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At app/assets/stylesheets/common/foundation/mixins.scss, line 126:

<comment>`-webkit-box-ordinal-group` is 1-based while `order` is 0-based. Passing the same value directly produces off-by-one ordering in old WebKit. The value should be `$val + 1` for the legacy property, or drop the legacy prefix if old browser support is unnecessary.</comment>

<file context>
@@ -92,3 +92,40 @@
+}
+
+@mixin order($val) {
+  -webkit-box-ordinal-group: $val;
+  -moz-box-ordinal-group: $val;
+  -ms-flex-order: $val;
</file context>
Suggested change
-webkit-box-ordinal-group: $val;
-webkit-box-ordinal-group: $val + 1;
Fix with Cubic

-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}