, and DataTables inserts .dataTables_wrapper between it and the . Making the container the scroll box keeps the search field, info line and pagination normal while only the table itself pans. -------------------------------------------------------------------------- */ .table-container, .table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */ } /* tablelist.tpl builds DataTables with dom '<"listtable"fit>pl', so .listtable is the element that actually holds the

. Scrolling it as well as the outer .table-container means the fix lands whichever of the two turns out to be the width-constrained ancestor. */ .table-container .listtable, .dataTables_wrapper .listtable { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-container > .dataTables_wrapper, .table-container > table.table { max-width: 100%; } /* No width:100% here on purpose — forcing it fights the min-width below and stops the table from ever becoming scrollable. */ .table-container table.table, .table-responsive table.table { margin-bottom: 0; } /* Safety net for tables that are NOT inside .table-container (module output, invoice line items, addon tables). Making the table itself the scroll box is the standard wrapper-free technique; row/cell layout is unaffected. */ @media (max-width: 767.98px) { .card > table.table, .panel > table.table, .card-body > table.table, .panel-body > table.table, .tab-content > table.table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* No min-width on the client list tables. They carry only 4-5 columns, so letting them wrap fits everything on a phone with nothing cut off, which beats forcing a swipe. The scroll box above stays as the safety net for any table that genuinely cannot fit. */ @media (max-width: 767.98px) { .table-container table.table > thead > tr > th, .table-container table.table > tbody > tr > td { padding: 10px 6px !important; font-size: 12.5px; white-space: normal; } /* Only cell VALUES may break mid-word (long domains have to). Headings must not, or short labels like "Status" split into "Statu s". */ .table-container table.table > tbody > tr > td { word-break: break-word; } .table-container table.table > thead > tr > th { word-break: normal; hyphens: none; } /* The pricing cell holds "$9.99USD Monthly" on one line, which forces the amount to break mid-token in a narrow column. Stacking the billing cycle under the amount keeps both intact. */ .table-container table.table > tbody > tr > td > small { display: block; } /* clientareaproducts.tpl marks the amount cell with data-order (it sorts on the numeric value), which makes it the one reliable hook for "this is a currency cell". Money must never break mid-token: "$10.00U / SD". */ .table-container table.table > tbody > tr > td[data-order] { white-space: nowrap; word-break: normal; } /* The leading icon/SSL column is decorative and eats width on a phone. */ .table-container table.table > thead > tr > th:first-child, .table-container table.table > tbody > tr > td:first-child { padding-left: 2px !important; padding-right: 2px !important; } } /* -------------------------------------------------------------------------- 3. DATATABLES CHROME (search / length / info / pagination) On phones these float next to each other and collide. Stack them. -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { float: none !important; width: 100%; text-align: center; margin: 8px 0; white-space: normal; } /* The search box renders as a near-invisible sliver on mobile because it inherits an auto width from a floated label. */ .dataTables_wrapper .dataTables_filter label { display: block; width: 100%; margin: 0; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_filter .form-control { width: 100% !important; min-width: 0; display: block; } .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_length .form-control { width: auto; display: inline-block; } /* Pagination buttons need to be tappable and must not run off the edge. */ .dataTables_wrapper .dataTables_paginate .pagination { flex-wrap: wrap; justify-content: center; margin: 0; } .dataTables_wrapper .dataTables_paginate .paginate_button { min-width: 40px; min-height: 40px; line-height: 26px; } } /* -------------------------------------------------------------------------- 4. NESTED CARD / PANEL DOUBLE OUTLINE (the visible "overlap") custom.css styles .card, .panel, .well AND .list-group with the same border + 14px radius. The View / Actions collapsibles nest these, so two rounded outlines paint a few px apart and look like overlapping boxes. Only the INNER outline is removed; the outer card keeps its styling. -------------------------------------------------------------------------- */ /* .sidebar is a layout wrapper that HOLDS the View/Actions cards — it is not a card itself. custom.css lists it alongside .card/.panel/.well and gives it the same border + 14px radius, so it paints a second rounded outline around the cards it contains. That is the box that reads as "overlapping". */ .sidebar, .panel-sidebar { border: 0 !important; box-shadow: none !important; background-color: transparent !important; border-radius: 0 !important; padding: 0 !important; } .card .card, .card .panel, .card .well, .card .list-group, .panel .card, .panel .panel, .panel .well, .panel .list-group, .well .list-group, .card-body > .list-group, .panel-body > .list-group { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } /* List rows inside a card only need separators, not a box each. */ .card .list-group-item, .panel .list-group-item { border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; } .card .list-group-item:first-child, .panel .list-group-item:first-child { border-top: 0 !important; } .card .list-group-item:last-child, .panel .list-group-item:last-child { border-bottom: 0 !important; } /* -------------------------------------------------------------------------- 5. SIDEBARS / PANELS STACK CLEANLY ON SMALL SCREENS -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .sidebar, .panel-sidebar, .sidebar .panel, #ViewFilterPanel { width: 100% !important; max-width: 100%; float: none !important; margin-bottom: 16px; } /* Header actions (buttons/dropdowns) wrap instead of overlapping title */ .card-title, .panel-heading, .card-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .card-header .pull-right, .panel-heading .pull-right, .card-title .pull-right { float: none !important; margin-left: auto; } } /* -------------------------------------------------------------------------- 6. TOUCH TARGETS + FORM DENSITY ON PHONES 16px inputs also stop iOS Safari from auto-zooming the page on focus, which is itself a common cause of "the layout jumped / overlapped". -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { input, select, textarea, .form-control, .form-select { font-size: 16px !important; max-width: 100%; } .btn { min-height: 40px; white-space: normal; } .btn-group, .btn-toolbar { flex-wrap: wrap; } /* Modals were running off-screen edge-to-edge */ .modal-dialog { margin: 10px; max-width: calc(100% - 20px); } .modal-body { overflow-x: auto; } /* Breadcrumb wrapping instead of pushing the page wide */ .breadcrumb { flex-wrap: wrap; } } /* Images / iframes / embeds never widen the page. */ img, svg, video, iframe, embed, object { max-width: 100%; } img, svg, video { height: auto; } /* ========================================================================== HEADER TOOLBAR ALIGNMENT (theme toggle / cart / hamburger) -------------------------------------------------------------------------- Reported: on a phone the toolbar dropped onto a second row underneath the logo and sat left-aligned. It belongs on the logo's row, flush right. Cause: header.tpl's masthead is div.navbar.navbar-light > div.container a.navbar-brand form.form-inline.ml-auto (its input-group is d-none below xl, so below xl the form is 0px wide) ul.navbar-nav.toolbar (cart + hamburger, plus the injected theme toggle on the offshorekaka skin) Bootstrap gives .navbar > .container flex-wrap: wrap. Measured at a 360px viewport: brand 180 + margin 16 + toolbar 188 = 384 against 328px of available container width, so the toolbar wrapped to its own line, and once wrapped the ml-auto on the (empty) form no longer pushed anything right, so it landed at the far left. Fix: below xl keep the row on one line and let the brand be the element that gives up space. The toolbar is fixed-size and pinned right with its own auto margin, so it no longer depends on the empty form for placement. Scoped to max-width 1199.98px on purpose. At xl and above the search box is visible and carries the ml-auto, the hamburger is hidden, and the row already lays out correctly - measured unchanged at 1440. ========================================================================== */ @media (max-width: 1199.98px) { #header .navbar.navbar-light > .container { flex-wrap: nowrap; align-items: center; } /* The only shrinkable item. min-width:0 is required: a flex item's automatic minimum size would otherwise hold it at its 180px width and push the toolbar back off the line. */ #header .navbar.navbar-light > .container > .navbar-brand { flex: 0 1 auto; min-width: 0; max-width: 100%; margin-right: .75rem !important; overflow: hidden; } /* hostflow uses a real ; the offshorekaka skin paints the logo as a background on .navbar-brand itself and needs nothing here. */ #header .navbar.navbar-light > .container > .navbar-brand .logo-img { max-width: 100%; height: auto; } #header .navbar.navbar-light > .container > form.form-inline { flex: 0 0 auto; margin-left: auto !important; } #header .navbar.navbar-light .toolbar { flex: 0 0 auto; flex-wrap: nowrap; margin-left: auto; align-items: center; } } /* Tighter gaps on phones buy the logo back some width. */ @media (max-width: 575.98px) { #header .navbar.navbar-light .toolbar > .nav-item { margin-left: .5rem !important; } #ok-theme-toggle { margin-left: 0 !important; margin-right: 0 !important; } } @media (max-width: 400px) { #header .navbar.navbar-light > .container { padding-left: .625rem; padding-right: .625rem; } #header .navbar.navbar-light .toolbar > .nav-item { margin-left: .35rem !important; } }