diff --git a/frontend/app/app.vue b/frontend/app/app.vue index 873f22e..107dffe 100644 --- a/frontend/app/app.vue +++ b/frontend/app/app.vue @@ -1,9 +1,6 @@ \ No newline at end of file diff --git a/frontend/app/components/parts/HeaderLinks.vue b/frontend/app/components/parts/HeaderLinks.vue index 3e4f628..bf27d7c 100644 --- a/frontend/app/components/parts/HeaderLinks.vue +++ b/frontend/app/components/parts/HeaderLinks.vue @@ -115,11 +115,24 @@ function getToPath(targetKey: string): string { .tui-tab { padding: 3px 5px; font-size: 0.7rem; - + .tab-sep { margin-right: 3px; } } } +@media screen and (max-width: 480px) { + .tui-tabs { + flex-wrap: wrap; + } + + .tui-tab { + flex: 1; + justify-content: center; + min-height: 36px; + padding: 6px 8px; + } +} + diff --git a/frontend/app/components/parts/StickyHeader.vue b/frontend/app/components/parts/StickyHeader.vue index 74b99ae..72b1b09 100644 --- a/frontend/app/components/parts/StickyHeader.vue +++ b/frontend/app/components/parts/StickyHeader.vue @@ -98,6 +98,15 @@ onUnmounted(() => window.removeEventListener('scroll', onScroll)); @media screen and (max-width: 900px) { font-size: 0.75rem; } + + @media screen and (max-width: 480px) { + display: none; + } } +.site-options { + display: flex; + gap: 8px; + align-items: center; +} diff --git a/frontend/app/components/parts/site_options/LanguageSelector.vue b/frontend/app/components/parts/site_options/LanguageSelector.vue index 38ed42b..257b5eb 100644 --- a/frontend/app/components/parts/site_options/LanguageSelector.vue +++ b/frontend/app/components/parts/site_options/LanguageSelector.vue @@ -75,27 +75,30 @@ border: 1px solid var(--color-border-color); } .dropdown { - z-index: 10; + z-index: 10; position: absolute; top: 50px; - right: 110px; + right: 0; margin-right: 10px; + max-width: calc(100vw - 32px); + width: auto; + min-width: 140px; background: var(--color-background-fore); -border: 1px solid var(--color-border-color); - border-radius: 0; - padding: 8px 0; - box-shadow: 4px -4px 0px 0px rgba(0,0,0,0.3); - border-left: 2px solid var(--color-border-color); + border: 1px solid var(--color-border-color); + border-radius: 0; + padding: 8px 0; + box-shadow: 4px -4px 0px 0px rgba(0,0,0,0.3); + border-left: 2px solid var(--color-border-color); - &::before { - content: "▸"; - display: block; - position: absolute; - left: -16px; - top: -2px; - font-size: 14px; - color: var(--color-border-color); - } + &::before { + content: "▸"; + display: block; + position: absolute; + left: -16px; + top: -2px; + font-size: 14px; + color: var(--color-border-color); + } } /* Items */ @@ -106,6 +109,7 @@ border: 1px solid var(--color-border-color); display: flex; gap: 10px; align-items: center; + min-height: 36px; &.active { background: var(--color-selected); @@ -115,4 +119,14 @@ border: 1px solid var(--color-border-color); .menu-item:hover { background: var(--color-hover); } + +@media (max-width: 480px) { + .dropdown { + top: 42px; + } + + .menu-item { + padding: 10px 12px; + } +} \ No newline at end of file diff --git a/frontend/app/components/parts/site_options/SiteOptions.vue b/frontend/app/components/parts/site_options/SiteOptions.vue index 330a424..9d5b669 100644 --- a/frontend/app/components/parts/site_options/SiteOptions.vue +++ b/frontend/app/components/parts/site_options/SiteOptions.vue @@ -14,10 +14,15 @@ import ThemeSelector from './ThemeSelector.vue'; .site-options { display: flex; justify-content: right; - width: 400px; + width: auto; + + @media screen and (max-width: 900px) { + gap: 8px; + } @media screen and (max-width: 600px) { margin-top: -10px; + gap: 4px; } } \ No newline at end of file diff --git a/frontend/app/components/parts/site_options/ThemeSelector.vue b/frontend/app/components/parts/site_options/ThemeSelector.vue index 426c1f6..9d1cbb9 100644 --- a/frontend/app/components/parts/site_options/ThemeSelector.vue +++ b/frontend/app/components/parts/site_options/ThemeSelector.vue @@ -1,5 +1,5 @@