diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx
index 41c60521..a7025ae9 100644
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -505,7 +505,7 @@ export function MainLayout() {
-
+
diff --git a/src/pages/LogsPage.module.scss b/src/pages/LogsPage.module.scss
index 0c1d176c..42ba62df 100644
--- a/src/pages/LogsPage.module.scss
+++ b/src/pages/LogsPage.module.scss
@@ -2,11 +2,15 @@
.container {
width: 100%;
- height: 100%;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
+
+ @include mobile {
+ min-height: auto;
+ overflow: visible;
+ }
}
.pageTitle {
@@ -53,6 +57,11 @@
gap: $spacing-lg;
flex: 1;
min-height: 0;
+
+ @include mobile {
+ gap: $spacing-md;
+ min-height: auto;
+ }
}
.logCard {
@@ -61,6 +70,12 @@
flex: 1;
min-height: 0;
overflow: hidden;
+
+ @include mobile {
+ flex: 0 0 auto;
+ min-height: auto;
+ overflow: visible;
+ }
}
.toolbar {
@@ -87,6 +102,11 @@
:global(.form-group) {
margin: 0;
}
+
+ @include mobile {
+ gap: $spacing-sm;
+ margin-bottom: $spacing-sm;
+ }
}
.searchWrapper {
@@ -162,12 +182,25 @@
border: 1px solid var(--border-color);
border-radius: $radius-md;
flex: 1 1 auto;
- min-height: 0;
+ min-height: 280px;
+ max-height: calc(100vh - 320px);
overflow: auto;
position: relative;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
overscroll-behavior: contain;
+
+ @include tablet {
+ min-height: 240px;
+ max-height: calc(100vh - 300px);
+ }
+
+ @include mobile {
+ min-height: 360px;
+ max-height: 480px;
+ flex: 0 0 auto;
+ overflow: auto;
+ }
}
.errorPanel {
@@ -190,6 +223,17 @@
background: var(--bg-primary);
color: var(--text-secondary);
font-size: 12px;
+
+ @include mobile {
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+ gap: $spacing-xs;
+
+ > span {
+ width: 100%;
+ }
+ }
}
.loadMoreCount {
@@ -201,6 +245,16 @@
display: flex;
align-items: center;
gap: $spacing-md;
+
+ @include mobile {
+ width: 100%;
+ flex-wrap: wrap;
+ gap: $spacing-sm;
+
+ > span {
+ white-space: nowrap;
+ }
+ }
}
.logList {
@@ -227,9 +281,18 @@
background: rgba(59, 130, 246, 0.06);
}
+ @include tablet {
+ grid-template-columns: 140px 1fr;
+ gap: $spacing-sm;
+ padding: 8px 10px;
+ font-size: 12px;
+ }
+
@include mobile {
grid-template-columns: 1fr;
gap: $spacing-xs;
+ padding: 8px 10px;
+ font-size: 11.5px;
}
}
@@ -371,12 +434,17 @@
@include mobile {
max-width: 100%;
+ flex-basis: 100%;
}
}
.message {
color: var(--text-secondary);
word-break: break-word;
+
+ @include mobile {
+ flex-basis: 100%;
+ }
}
@media (max-height: 820px) {
@@ -401,7 +469,66 @@
padding: $spacing-md;
}
+ .logPanel {
+ min-height: 200px;
+ max-height: calc(100vh - 280px);
+ }
+
+ .logRow {
+ padding: 8px 10px;
+ font-size: 12px;
+ }
+
.errorPanel {
height: 360px;
}
}
+
+@media (max-height: 600px) {
+ .pageTitle {
+ font-size: 20px;
+ margin-bottom: $spacing-sm;
+ }
+
+ .tabBar {
+ margin-bottom: $spacing-sm;
+ }
+
+ .tabItem {
+ padding: 8px 12px;
+ font-size: 13px;
+ }
+
+ .content {
+ gap: $spacing-sm;
+ }
+
+ .filters {
+ margin-bottom: $spacing-sm;
+ gap: $spacing-sm;
+ }
+
+ .logCard {
+ padding: $spacing-sm;
+ }
+
+ .logPanel {
+ min-height: 160px;
+ max-height: calc(100vh - 220px);
+ }
+
+ .logRow {
+ padding: 6px 8px;
+ font-size: 11px;
+ grid-template-columns: 130px 1fr;
+ gap: $spacing-xs;
+ }
+
+ .loadMoreBanner {
+ padding: 6px 10px;
+ }
+
+ .errorPanel {
+ height: 280px;
+ }
+}
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index bcd15291..0e9d1946 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -12,6 +12,13 @@
overflow: hidden;
background: var(--bg-secondary);
color: var(--text-primary);
+
+ @media (max-width: $breakpoint-mobile) {
+ height: auto;
+ min-height: 100vh;
+ overflow: visible;
+ overflow-y: auto;
+ }
}
.main-header {
@@ -230,6 +237,16 @@
@supports (height: 100dvh) {
height: calc(100dvh - var(--header-height));
}
+
+ @media (max-width: $breakpoint-mobile) {
+ height: auto;
+ min-height: calc(100vh - var(--header-height));
+ overflow: visible;
+
+ @supports (min-height: 100dvh) {
+ min-height: calc(100dvh - var(--header-height));
+ }
+ }
}
.sidebar {
@@ -328,6 +345,16 @@
min-width: 0;
overflow-y: auto;
height: 100%;
+
+ &.content-logs {
+ overflow: hidden;
+
+ @media (max-width: $breakpoint-mobile) {
+ overflow: visible;
+ overflow-y: auto;
+ height: auto;
+ }
+ }
}
.main-content {
@@ -341,6 +368,13 @@
&.main-content-logs {
flex: 1 1 auto;
min-height: 0;
+ overflow: hidden;
+
+ @media (max-width: $breakpoint-mobile) {
+ flex: 0 0 auto;
+ min-height: auto;
+ overflow: visible;
+ }
}
@media (max-width: $breakpoint-mobile) {