Skip to content

fix: adapt to the head #92

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
kagol merged 5 commits into from
Feb 28, 2026
Merged

fix: adapt to the head #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
de6a7ef
fix: adapt to the head
James-9696 Feb 25, 2026
aec3403
fix: adapt to the dropdown
James-9696 Feb 25, 2026
c6906f0
fix: modify problem
James-9696 Feb 25, 2026
93a5f50
fix: adapt to head
James-9696 Feb 26, 2026
3fb6307
fix: adapt to head of title
James-9696 Feb 26, 2026
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
281 changes: 222 additions & 59 deletions packages/common/src/components/header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -516,7 +516,7 @@ const toggleTheme = (event: MouseEvent) => {

.dropdown-100 {
width: 100%;
margin-left: 296px;
margin-left: 269px;
}

// flex-center
Expand Down Expand Up @@ -547,57 +547,7 @@ const toggleTheme = (event: MouseEvent) => {

.hand {
cursor: pointer;
}

@media screen and (max-width: 1890px) {
.opentiny-design-header {
display: grid;
grid-template-columns: 1fr auto; // 两列：左侧内容 + 右侧nav-right
grid-template-rows: auto auto; // 两行
align-items: center;

.nav-left {
margin-top: 16px;
grid-column: 1; // 第1列
grid-row: 1; // 第1行
}

.nav-center {
grid-column: 1 / -1; // 跨越所有列
grid-row: 2; // 第2行
margin-left: 0 !important; // 移除原来的左边距
flex-wrap: wrap; // 允许内部换行
margin: 16px 0; // 上下间距10px
}

.nav-right {
margin-top: 16px;
grid-column: 2; // 第2列
grid-row: 1; // 第1行
margin-left: 0; // 移除auto margin
.top-menu {
.dropdown-menu {
.dropdown-content-title {
margin: 10px 0 0 112px;
}
.dropdown-100 {
margin-left: 96px;
}
}
}
}
}
}

@media screen and (min-width: 1855px) {
.opentiny-design-header {
display: flex;
justify-content: space-between;
align-items: center;
--top-height: 64px;
height: var(--top-height);
}
}
}

.opentiny-design-header {
top: 0;
Expand All @@ -608,6 +558,7 @@ const toggleTheme = (event: MouseEvent) => {
padding: 0 32px;
background-color: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
height: 64px;

// 通用样式
font-family: PingFangSC;
Expand All @@ -616,8 +567,8 @@ const toggleTheme = (event: MouseEvent) => {
font-weight: 400;
transition: all 0.3s;
* {
box-sizing: border-box;
}
box-sizing: border-box;
}

& {
.app-logo {
Expand Down Expand Up @@ -720,7 +671,6 @@ const toggleTheme = (event: MouseEvent) => {


& .active {
// border-bottom: 2px solid #000;
.dropdown-menu {
max-height: 290px;
}
Expand All @@ -737,12 +687,11 @@ const toggleTheme = (event: MouseEvent) => {
// 下拉面板 默认撑满宽度
.dropdown-menu {
display: flex;
justify-content: center;
position: absolute;
left: 0;
top: 64px;
width: 100vw;
height: 208px;
height: auto;
background-color: #fff;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.08);
overflow: hidden;
Expand All @@ -754,11 +703,12 @@ const toggleTheme = (event: MouseEvent) => {
font-size: 16px;
font-weight: 400;
line-height: 14px;
margin: 60px 0 0 312px;
margin: 16px 0 0 285px;
}

.dropdown-content {
padding: 32px 0;
width: auto;
padding: 16px 0;
flex-wrap: wrap;
justify-content: flex-start;
gap: 24px;
Expand Down Expand Up @@ -962,6 +912,219 @@ const toggleTheme = (event: MouseEvent) => {

}
}

@media screen and (max-width: 1720px) {
.opentiny-design-header {
display: grid;
grid-template-columns: 1fr auto; // 两列：左侧内容 + 右侧nav-right
grid-template-rows: auto auto; // 两行
align-items: center;

.nav-left {
margin-top: 16px;
margin-right: 64px;
grid-column: 1; // 第1列
grid-row: 1; // 第1行
}

.nav-center {
grid-column: 1 / -1; // 跨越所有列
grid-row: 2; // 第2行
margin-left: 0 !important; // 移除原来的左边距
flex-wrap: wrap; // 允许内部换行
margin: 16px 0; // 上下间距10px
}

.nav-right {
margin-top: 16px;
grid-column: 2; // 第2列
grid-row: 1; // 第1行
margin-left: 0; // 移除auto margin
.top-menu {
.dropdown-menu {
.dropdown-content-title {
margin: 16px 0 0 112px;
}
.dropdown-100 {
margin-left: 96px;
}
}
}
}
}
}
Comment on lines 916 to 955
Copy link

@coderabbitai coderabbitai bot Feb 25, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# First, let's read the file to see the full context around lines 914-953
head -n 960 packages/common/src/components/header.vue | tail -n 100

Repository: opentiny/opentiny.design

Length of output: 2046

🏁 Script executed:

# Check the total line count to ensure we're looking at the right section
wc -l packages/common/src/components/header.vue

Repository: opentiny/opentiny.design

Length of output: 114

🏁 Script executed:

# Search for media queries in the file to understand the breakpoint strategy
rg "@media" packages/common/src/components/header.vue -A 2 -B 1

Repository: opentiny/opentiny.design

Length of output: 1371

Scope the 1720px grid rule to tablet/desktop only.

The media query @media screen and (max-width: 1720px) applies from 0px to 1720px, including the mobile range. This causes the grid layout, margins, and flex properties to conflict with the dedicated mobile layout (defined at @media screen and (max-width: 814px)). The margin-top values and grid positioning will unintentionally affect mobile views.

The codebase establishes a clear breakpoint convention using min-width: 815px for desktop/tablet. Update the query accordingly:

Suggested adjustment 
-@media screen and (max-width: 1720px) {
+@media screen and (min-width: 815px) and (max-width: 1720px) {
📝 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
@media screen and (max-width: 1720px) {
.opentiny-design-header {
display: grid;
grid-template-columns: 1fr auto; // 两列：左侧内容 + 右侧nav-right
grid-template-rows: auto auto; // 两行
align-items: center;
.nav-left {
margin-top: 16px;
margin-right: 64px;
grid-column: 1; // 第1列
grid-row: 1; // 第1行
}
.nav-center {
grid-column: 1 / -1; // 跨越所有列
grid-row: 2; // 第2行
margin-left: 0 !important; // 移除原来的左边距
flex-wrap: wrap; // 允许内部换行
margin: 16px 0; // 上下间距10px
}
.nav-right {
margin-top: 16px;
grid-column: 2; // 第2列
grid-row: 1; // 第1行
margin-left: 0; // 移除auto margin
.top-menu {
.dropdown-menu {
.dropdown-content-title {
margin: 10px 0 0 112px;
}
.dropdown-100 {
margin-left: 96px;
}
}
}
}
}
}
`@media` screen and (min-width: 815px) and (max-width: 1720px) {
.opentiny-design-header {
display: grid;
grid-template-columns: 1fr auto; // 两列：左侧内容 + 右侧nav-right
grid-template-rows: auto auto; // 两行
align-items: center;
.nav-left {
margin-top: 16px;
margin-right: 64px;
grid-column: 1; // 第1列
grid-row: 1; // 第1行
}
.nav-center {
grid-column: 1 / -1; // 跨越所有列
grid-row: 2; // 第2行
margin-left: 0 !important; // 移除原来的左边距
flex-wrap: wrap; // 允许内部换行
margin: 16px 0; // 上下间距10px
}
.nav-right {
margin-top: 16px;
grid-column: 2; // 第2列
grid-row: 1; // 第1行
margin-left: 0; // 移除auto margin
.top-menu {
.dropdown-menu {
.dropdown-content-title {
margin: 10px 0 0 112px;
}
.dropdown-100 {
margin-left: 96px;
}
}
}
}
}
}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/common/src/components/header.vue` around lines 914 - 953, The media
query currently using "@media screen and (max-width: 1720px)" is too broad and
affects mobile; change it to target tablet/desktop only by scoping to the 815px+
range (e.g. use a media query with min-width: 815px and max-width: 1720px) so
the .opentiny-design-header grid block, and its child rules for .nav-left,
.nav-center and .nav-right, do not apply under the mobile breakpoint.


@media (min-width: 1721px) and (max-width: 1854px) {
.opentiny-design-header .nav-center {
margin-left: 70px;
grid-row: 1;
}
.opentiny-design-header {
display: grid;
align-items: center;
.nav-left, .nav-right {
grid-row: 1; // 第1行
}
}
}
Comment on lines +957 to +969
Copy link

@coderabbitai coderabbitai bot Feb 25, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# First, let's locate and examine the header.vue file
find . -name "header.vue" -type f | head -20

Repository: opentiny/opentiny.design

Length of output: 111

🏁 Script executed:

# Check the content at the specified lines
if [ -f "packages/common/src/components/header.vue" ]; then
  wc -l packages/common/src/components/header.vue
fi

Repository: opentiny/opentiny.design

Length of output: 114

🏁 Script executed:

# Read the specific section mentioned in the review
sed -n '950,975p' packages/common/src/components/header.vue

Repository: opentiny/opentiny.design

Length of output: 559

🏁 Script executed:

# Check all `@media` queries and grid definitions in the file
rg -n "display:\s*grid|grid-template" packages/common/src/components/header.vue

Repository: opentiny/opentiny.design

Length of output: 236

🏁 Script executed:

# Look at the broader context around other breakpoints
sed -n '900,1050p' packages/common/src/components/header.vue | cat -n

Repository: opentiny/opentiny.design

Length of output: 4107

🏁 Script executed:

# Check if there are any comments or TODOs about this breakpoint
rg -n "1721|1854|1720" packages/common/src/components/header.vue

Repository: opentiny/opentiny.design

Length of output: 168

🏁 Script executed:

# Check if there are any JavaScript logic or Vue computed properties that might depend on grid layout
rg -A 5 -B 5 "header|nav-center|nav-left|nav-right" packages/common/src/components/header.vue | head -100

Repository: opentiny/opentiny.design

Length of output: 3253

Define explicit grid columns in the 1721–1854 breakpoint.

At line 961, the container switches to grid but lacks grid-template-columns, unlike the adjacent max-width: 1720px breakpoint which explicitly defines grid-template-columns: 1fr auto;. Without explicit column definitions, the three-region layout (left/center/right) depends on implicit tracks and margin positioning, making it less maintainable and prone to layout shifts.

🔧 Suggested adjustment 
 `@media` (min-width: 1721px) and (max-width: 1854px) {
-  .opentiny-design-header .nav-center {
-      margin-left: 70px;
-      grid-row: 1; 
-  }
   .opentiny-design-header {
     display: grid;
+    grid-template-columns: auto 1fr auto;
     align-items: center;
-    .nav-left, .nav-right {
-      grid-row: 1;     // 第1行
-    }
+    .nav-left {
+      grid-column: 1;
+      grid-row: 1;
+    }
+    .nav-center {
+      grid-column: 2;
+      grid-row: 1;
+      margin-left: 70px;
+    }
+    .nav-right {
+      grid-column: 3;
+      grid-row: 1;
+      justify-self: end;
+      margin-left: 0;
+    }
   }
 }
📝 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
@media (min-width: 1721px) and (max-width: 1854px) {
.opentiny-design-header .nav-center {
margin-left: 70px;
grid-row: 1;
}
.opentiny-design-header {
display: grid;
align-items: center;
.nav-left, .nav-right {
grid-row: 1; // 第1行
}
}
}
`@media` (min-width: 1721px) and (max-width: 1854px) {
.opentiny-design-header {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
.nav-left {
grid-column: 1;
grid-row: 1;
}
.nav-center {
grid-column: 2;
grid-row: 1;
margin-left: 70px;
}
.nav-right {
grid-column: 3;
grid-row: 1;
justify-self: end;
margin-left: 0;
}
}
}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/common/src/components/header.vue` around lines 955 - 967, The media
query for .opentiny-design-header (min-width:1721px && max-width:1854px)
switches to display:grid but doesn't declare grid-template-columns, which causes
implicit tracks and unstable placement of .nav-left, .nav-center and .nav-right;
update that rule to define explicit columns (e.g., grid-template-columns: auto
1fr auto) and, if needed, assign explicit grid-column positions for .nav-left,
.nav-center and .nav-right to ensure left/center/right layout remains stable
across that breakpoint.


@media (min-width: 1740px) and (max-width: 1750px) {
.opentiny-design-header .nav-right .dropdown-menu .dropdown-content-title {
margin-left: 290px;
}
.dropdown-100 {
margin-left: 275px;
}
}

@media (min-width: 1751px) and (max-width: 1760px) {
.opentiny-design-header .nav-right .dropdown-menu .dropdown-content-title {
margin-left: 295px;
}
.dropdown-100 {
margin-left: 279px;
}
}

@media (min-width: 1761px) and (max-width: 1770px) {
.opentiny-design-header .nav-right .dropdown-menu .dropdown-content-title {
margin-left: 297px;
}
.dropdown-100 {
margin-left: 282px;
}
}

@media (min-width: 1771px) and (max-width: 1780px) {
.opentiny-design-header .nav-right .dropdown-menu .dropdown-content-title {
margin-left: 301px;
}
.dropdown-100 {
margin-left: 286px;
}
}

@media (min-width: 1781px) and (max-width: 1790px) {
.opentiny-design-header .nav-right .dropdown-menu .dropdown-content-title {
margin-left: 304px;
}
.dropdown-100 {
margin-left: 289px;
}
}

@media (min-width: 1791px) and (max-width: 1800px) {
.opentiny-design-header .nav-right .dropdown-menu .dropdown-content-title {
margin-left: 308px;
}
.dropdown-100 {
margin-left: 293px;
}
}

@media (min-width: 1801px) and (max-width: 1812px) {
.opentiny-design-header .nav-right .dropdown-menu .dropdown-content-title {
margin-left: 311px;
}
.dropdown-100 {
margin-left: 295px;
}
}

@media (min-width: 1813px) and (max-width: 1825px) {
.opentiny-design-header .nav-right .dropdown-menu .dropdown-content-title {
margin-left: 316px;
}
.dropdown-100 {
margin-left: 300px;
}
}

@media (min-width: 1826px) and (max-width: 1840px) {
.opentiny-design-header .nav-right .dropdown-menu .dropdown-content-title {
margin-left: 320px;
}
.dropdown-100 {
margin-left: 304px;
}
}

@media (min-width: 1841px) and (max-width: 1849px) {
.opentiny-design-header .nav-right .dropdown-menu .dropdown-content-title {
margin-left: 323px;
}
.dropdown-100 {
margin-left: 307px;
}
}

@media (min-width: 1850px) and (max-width: 1854px) {
.opentiny-design-header .nav-right .dropdown-menu .dropdown-content-title {
margin-left: 326px;
}
.dropdown-100 {
margin-left: 310px;
}
}

@media (min-width: 1855px) {
.opentiny-design-header .nav-right .dropdown-menu .dropdown-content-title {
margin-left: 310px;
}
.dropdown-100 {
margin-left: 295px;
}
}

@media (min-width: 990px) and (max-width: 1090px) {
.opentiny-design-header .nav-center .top-menu {
margin-right: 28px;
}
}

@media (min-width: 821px) and (max-width: 910px) {
.opentiny-design-header .nav-center .top-menu {
margin-right: 24px;
}
}

@media screen and (max-width: 1150px) {
.opentiny-design-header .nav-right .dropdown-menu .dropdown-content {
gap: 0;
}
}

@media (min-width: 985px) and (max-width: 1050px) {
.opentiny-design-header .nav-right .top-menu .dropdown-menu {
.dropdown-100 {
margin-left: 40px;
}
.dropdown-content-title {
margin: 10px 0 0 56px;
}
}
}

@media (min-width: 960px) and (max-width: 984px) {
.opentiny-design-header .nav-right .top-menu .dropdown-menu {
.dropdown-100 {
margin-left: 20px;
}
.dropdown-content-title {
margin: 10px 0 0 36px;
}
}
}

@media screen and (min-width: 1855px) {
.opentiny-design-header {
display: flex;
justify-content: space-between;
align-items: center;
--top-height: 64px;
height: var(--top-height);
}
}
</style>

<style lang="less">
Expand Down
2 changes: 1 addition & 1 deletion packages/home/src/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ body {
}
}

@media (min-width: 912px) and (max-width: 1670px) {
@media (min-width: 912px) and (max-width: 1720px) {
#app {
margin-top: 82px;
height: calc(100% - 82px);
Expand Down