Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Commit 06e27f7

Browse files
Fix Mobile Bugs
1 parent 82e91a6 commit 06e27f7

File tree

3 files changed

+57
-16
lines changed

3 files changed

+57
-16
lines changed

src/app/components/dashboard/dashboard.component.ts

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ import { AdminService, SystemStatus, UserStats } from '../../services/admin.serv
2323
MatChipsModule,
2424
],
2525
template: `
26-
<div class="dashboard-container p-4 md:p-6 bg-md-sys-color-surface min-h-screen">
26+
<div class="dashboard-container p-4 md:p-6 bg-md-sys-color-surface min-h-screen max-h-screen overflow-y-auto">
2727
<h1 class="md-typescale-headline-large text-md-sys-color-on-surface mb-4 md:mb-6">관리자 대시보드</h1>
2828
29-
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 md:gap-6">
29+
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 md:gap-6 overflow-x-auto pb-4">
3030
<!-- 시스템 상태 카드 -->
3131
<div class="md-card bg-md-sys-color-surface-container text-md-sys-color-on-surface hover:shadow-elevation-3 transition-all duration-300">
3232
<div class="flex items-center gap-3 mb-4">
@@ -208,6 +208,25 @@ import { AdminService, SystemStatus, UserStats } from '../../services/admin.serv
208208
min-height: 300px;
209209
display: flex;
210210
flex-direction: column;
211+
min-width: 280px;
212+
max-width: 100%;
213+
}
214+
215+
@media (max-width: 768px) {
216+
.dashboard-container {
217+
overflow-x: hidden !important;
218+
}
219+
220+
.grid {
221+
display: flex !important;
222+
flex-direction: column !important;
223+
overflow-x: visible !important;
224+
}
225+
226+
.md-card {
227+
min-width: 100% !important;
228+
width: 100% !important;
229+
}
211230
}
212231
213232
.md-button {

src/app/components/database/database.component.ts

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,12 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
2929
MatChipsModule
3030
],
3131
template: `
32-
<div class="p-4 md:p-6 bg-md-sys-color-surface h-screen overflow-hidden">
32+
<div class="p-4 md:p-6 bg-md-sys-color-surface min-h-screen">
3333
<h1 class="md-typescale-headline-large text-md-sys-color-on-surface mb-4 md:mb-6">데이터베이스 관리</h1>
3434
35-
<div class="flex flex-col lg:grid lg:grid-cols-3 gap-4 md:gap-6" style="height: calc(100vh - 120px);">
35+
<div class="flex flex-col lg:grid lg:grid-cols-3 gap-4 md:gap-6" style="min-height: calc(100vh - 200px);">
3636
<!-- 테이블 목록 -->
37-
<div class="md-card bg-md-sys-color-surface-container text-md-sys-color-on-surface lg:col-span-1 h-64 lg:h-auto" style="max-height: 100%; display: flex; flex-direction: column; overflow: hidden;">
37+
<div class="md-card bg-md-sys-color-surface-container text-md-sys-color-on-surface lg:col-span-1" style="min-height: 400px; display: flex; flex-direction: column;">
3838
<div class="flex items-center justify-between mb-4">
3939
<h2 class="md-typescale-title-large text-md-sys-color-on-surface">테이블 목록</h2>
4040
<button class="md-button md-button-text p-3 rounded-full touch-target" (click)="refreshTables()">
@@ -69,7 +69,7 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
6969
</div>
7070
7171
<!-- 테이블 데이터 뷰어 -->
72-
<div class="md-card bg-md-sys-color-surface-container text-md-sys-color-on-surface lg:col-span-2 flex-1" style="max-height: 100%; display: flex; flex-direction: column; overflow: hidden;">
72+
<div class="md-card bg-md-sys-color-surface-container text-md-sys-color-on-surface lg:col-span-2" style="min-height: 400px; display: flex; flex-direction: column;">
7373
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 gap-2">
7474
<h2 class="md-typescale-title-large text-md-sys-color-on-surface truncate">
7575
{{ selectedTable ? selectedTable.name : '테이블 뷰어' }}
@@ -85,7 +85,7 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
8585
</button>
8686
</div>
8787
</div>
88-
<div class="flex-1 overflow-hidden">
88+
<div class="flex-1" style="min-height: 300px;">
8989
<div *ngIf="!selectedTable" class="flex items-center justify-center h-full text-md-sys-color-on-surface-variant">
9090
<div class="text-center">
9191
<mat-icon class="w-16 h-16 mb-4 text-md-sys-color-outline">table_view</mat-icon>
@@ -186,8 +186,19 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
186186
padding: 24px;
187187
display: flex;
188188
flex-direction: column;
189-
height: 100%;
190-
min-height: 0;
189+
min-height: 400px;
190+
}
191+
192+
@media (max-width: 1023px) {
193+
.flex.flex-col.lg\\:grid {
194+
display: flex !important;
195+
flex-direction: column !important;
196+
}
197+
198+
.md-card {
199+
min-height: 300px;
200+
margin-bottom: 1rem;
201+
}
191202
}
192203
193204

src/app/components/logs/logs.component.ts

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@ import { AdminService, LogFile, LogContent } from '../../services/admin.service'
2727
FormsModule
2828
],
2929
template: `
30-
<div class="p-4 md:p-6 bg-md-sys-color-surface h-screen overflow-hidden">
30+
<div class="p-4 md:p-6 bg-md-sys-color-surface min-h-screen">
3131
<h1 class="md-typescale-headline-large text-md-sys-color-on-surface mb-4 md:mb-6">로그 관리</h1>
3232
33-
<div class="flex flex-col lg:grid lg:grid-cols-3 gap-4 md:gap-6" style="height: calc(100vh - 120px);">
33+
<div class="flex flex-col lg:grid lg:grid-cols-3 gap-4 md:gap-6" style="min-height: calc(100vh - 200px);">
3434
<!-- 로그 파일 목록 -->
35-
<div class="md-card bg-md-sys-color-surface-container text-md-sys-color-on-surface lg:col-span-1 h-64 lg:h-auto" style="max-height: 100%; display: flex; flex-direction: column; overflow: hidden;">
35+
<div class="md-card bg-md-sys-color-surface-container text-md-sys-color-on-surface lg:col-span-1" style="min-height: 400px; display: flex; flex-direction: column;">
3636
<div class="flex items-center justify-between mb-4">
3737
<h2 class="md-typescale-title-large text-md-sys-color-on-surface">로그 파일 목록</h2>
3838
<button class="md-button md-button-text p-3 rounded-full touch-target" (click)="refreshLogFiles()">
@@ -68,7 +68,7 @@ import { AdminService, LogFile, LogContent } from '../../services/admin.service'
6868
</div>
6969
7070
<!-- 로그 내용 뷰어 -->
71-
<div class="md-card bg-md-sys-color-surface-container text-md-sys-color-on-surface lg:col-span-2 flex-1" style="max-height: 100%; display: flex; flex-direction: column; overflow: hidden;">
71+
<div class="md-card bg-md-sys-color-surface-container text-md-sys-color-on-surface lg:col-span-2" style="min-height: 400px; display: flex; flex-direction: column;">
7272
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 gap-2">
7373
<h2 class="md-typescale-title-large text-md-sys-color-on-surface truncate">
7474
{{ selectedFile ? selectedFile.name : '로그 뷰어' }}
@@ -84,7 +84,7 @@ import { AdminService, LogFile, LogContent } from '../../services/admin.service'
8484
</button>
8585
</div>
8686
</div>
87-
<div class="flex-1" style="min-height: 0; overflow: hidden;">
87+
<div class="flex-1" style="min-height: 300px;">
8888
<div *ngIf="!selectedFile" class="flex items-center justify-center h-full text-md-sys-color-on-surface-variant">
8989
<div class="text-center">
9090
<mat-icon class="w-16 h-16 mb-4 text-md-sys-color-outline">visibility</mat-icon>
@@ -144,8 +144,19 @@ import { AdminService, LogFile, LogContent } from '../../services/admin.service'
144144
padding: 24px;
145145
display: flex;
146146
flex-direction: column;
147-
height: 100%;
148-
min-height: 0;
147+
min-height: 400px;
148+
}
149+
150+
@media (max-width: 1023px) {
151+
.flex.flex-col.lg\\:grid {
152+
display: flex !important;
153+
flex-direction: column !important;
154+
}
155+
156+
.md-card {
157+
min-height: 300px;
158+
margin-bottom: 1rem;
159+
}
149160
}
150161
151162

0 commit comments

Comments
 (0)