diff --git a/static/css/mobile_custom.css b/static/css/mobile_custom.css index 3b09f3d..89548a5 100644 --- a/static/css/mobile_custom.css +++ b/static/css/mobile_custom.css @@ -72,14 +72,17 @@ background-color: rgba(30, 41, 59, 0.6) !important; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 50rem !important; /* Pill shape container */ - padding: 6px !important; + border-radius: 10px !important; + padding: 4px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important; - display: inline-flex !important; /* Fit content */ - flex-wrap: wrap; /* allow wrap on small screens */ - justify-content: center; - width: auto !important; /* Prevent full width */ - margin-top: 2px !important; /* Reduced for modularity */ + display: flex !important; /* Changed from inline-flex to prevent horizontal stretching */ + flex-wrap: nowrap !important; /* Force scrollable row */ + overflow-x: auto !important; + -webkit-overflow-scrolling: touch; + width: 100% !important; /* Max width constraint */ + max-width: 100% !important; + box-sizing: border-box !important; + margin-top: 2px !important; } /* Override for the fallback above to be tighter */ @@ -102,11 +105,13 @@ } ul.nav.nav-pills .nav-link { - border-radius: 50rem !important; - padding: 6px 16px !important; + border-radius: 6px !important; + padding: 6px 12px !important; color: #94a3b8 !important; /* Muted text */ font-weight: 600; transition: all 0.3s ease; + white-space: nowrap !important; /* Necessary for scrollable items */ + font-size: 12px !important; } ul.nav.nav-pills .nav-link:hover { @@ -121,15 +126,39 @@ box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4); } - /* Layout Expansion on Mobile */ - .container, .container-fluid, .row, form, #main_container { + /* Layout Expansion on Mobile - Critical Fix for Horizontal Shift */ + html, body { + overflow-x: hidden !important; + width: 100vw !important; + position: relative; + } + + .container, .container-fluid, #main_container { width: 100% !important; max-width: 100% !important; - padding-left: 8px !important; - padding-right: 8px !important; + padding-left: 5px !important; + padding-right: 5px !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; + overflow-x: hidden !important; /* Prevent internal bleed from stretching body */ + } + + .row { + margin-left: 0 !important; + margin-right: 0 !important; + width: 100% !important; + } + + [class*="col-"] { + padding-left: 5px !important; + padding-right: 5px !important; + } + + form { + width: 100% !important; + margin: 0 !important; + box-sizing: border-box !important; } /* Card/Table Container Fix */ diff --git a/templates/anime_downloader_anilife_queue.html b/templates/anime_downloader_anilife_queue.html index 238884d..aeb7584 100644 --- a/templates/anime_downloader_anilife_queue.html +++ b/templates/anime_downloader_anilife_queue.html @@ -92,20 +92,12 @@ .queue-btn-top { flex: 1; justify-content: center; font-size: 11px !important; padding: 10px !important; } .queue-meta { font-size: 10px; margin-top: 4px; } - /* Force container padding reduction for mobile queue */ - #main_container { padding-left: 2px !important; padding-right: 2px !important; } - - /* Fix navigation pills overflow */ - #menu_module_div .nav-pills, #menu_page_div .nav-pills { - flex-wrap: nowrap !important; - overflow-x: auto !important; - -webkit-overflow-scrolling: touch; + /* Ensure breadcrumb span doesn't force width */ + #menu_module_div span.nav-link { + overflow: hidden; + text-overflow: ellipsis; + max-width: 150px; white-space: nowrap !important; - display: flex !important; - } - #menu_module_div .nav-link, #menu_page_div .nav-link { - padding: 8px 12px !important; - font-size: 12px !important; } /* Header buttons wrap and layout */ @@ -116,13 +108,7 @@ min-width: 120px; } - /* Ensure breadcrumb span doesn't force width */ - #menu_module_div span.nav-link { - overflow: hidden; - text-overflow: ellipsis; - max-width: 200px; - white-space: nowrap; - } + /* Ensure breadcrumb span doesn't force width - moved up */ } .mobile-queue-card { diff --git a/templates/anime_downloader_anilife_request.html b/templates/anime_downloader_anilife_request.html index 479a541..9244d17 100644 --- a/templates/anime_downloader_anilife_request.html +++ b/templates/anime_downloader_anilife_request.html @@ -11,20 +11,10 @@ body { background-attachment: fixed !important; } -/* Global Container Margin Overrides */ +/* Global Container Margin Overrides - mobile_custom.css와 통합 */ #main_container { width: 100% !important; max-width: 100% !important; - padding-left: 2px !important; /* 15px -> 2px */ - padding-right: 2px !important; /* 15px -> 2px */ - margin-left: 0 !important; - margin-right: 0 !important; -} -.container, .container-fluid:not(.anilife-common-wrapper) { - width: 100% !important; - max-width: 100% !important; - padding-left: 0 !important; - padding-right: 0 !important; } @@ -775,27 +765,12 @@ body { /* 모바일 반응형 - Bootstrap 모든 레이아웃 강제 덮어쓰기 */ @media (max-width: 768px) { - /* 상단 서브메뉴가 SJVA 메인 navbar에 가려지지 않도록 여백 추가 */ - ul.nav.nav-pills.bg-light { - margin-top: 60px !important; - flex-wrap: nowrap !important; - overflow-x: auto !important; - -webkit-overflow-scrolling: touch; - display: flex !important; - width: 100% !important; - border-radius: 10px !important; - } - ul.nav.nav-pills .nav-link { - padding: 8px 12px !important; - font-size: 11px !important; - white-space: nowrap !important; - } - /* Ensure breadcrumb span doesn't force width */ #menu_module_div span.nav-link { overflow: hidden; text-overflow: ellipsis; - max-width: 200px; + max-width: 150px; + white-space: nowrap !important; } /* 입력창 크기 최적화 */