settings updates, fixed
This commit is contained in:
Mark Gregory
@@ -1005,3 +1005,263 @@ span.flatpickr-weekday {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Helpdesk mobile / tablet responsive layer
|
||||
Keeps the Core desktop presentation while making every Helpdesk screen
|
||||
usable on touch devices and narrow viewports.
|
||||
========================================================================== */
|
||||
|
||||
.hd-mobile-header {
|
||||
min-height: 3.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.hd-helpdesk-surface {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface > * {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface,
|
||||
.hd-helpdesk-surface.hd-mobile-ready {
|
||||
width: 100%;
|
||||
max-width: 100% !important;
|
||||
padding-left: .75rem;
|
||||
padding-right: .75rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Hero/page headers */
|
||||
.hd-helpdesk-surface .rounded-3xl {
|
||||
border-radius: 1.15rem;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface .bg-gradient-to-br {
|
||||
padding: 1.1rem !important;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface .bg-gradient-to-br h1 {
|
||||
font-size: 1.65rem !important;
|
||||
line-height: 1.15 !important;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface .bg-gradient-to-br p {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
/* All action rows become thumb-friendly full-width grids. */
|
||||
.hd-helpdesk-surface .hd-btn {
|
||||
min-height: 2.75rem;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding-inline: .9rem;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface .bg-gradient-to-br .flex.flex-wrap.gap-2 {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
width: 100%;
|
||||
gap: .55rem !important;
|
||||
}
|
||||
|
||||
/* Dashboard metrics */
|
||||
.hd-helpdesk-surface .grid.md\:grid-cols-2,
|
||||
.hd-helpdesk-surface .grid.lg\:grid-cols-4,
|
||||
.hd-helpdesk-surface .grid.xl\:grid-cols-4 {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
/* Settings cards: two compact coloured cards per row, one on very small phones. */
|
||||
.hd-core-settings > .grid,
|
||||
.hd-helpdesk-surface[dusk="helpdesk-settings-manager"] > .grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||||
gap: .55rem !important;
|
||||
}
|
||||
|
||||
.hd-core-settings > .grid > a,
|
||||
.hd-helpdesk-surface[dusk="helpdesk-settings-manager"] > .grid > a {
|
||||
min-width: 0;
|
||||
min-height: 4.4rem;
|
||||
padding: .75rem !important;
|
||||
border-radius: .8rem !important;
|
||||
}
|
||||
|
||||
.hd-core-settings > .grid > a .text-2xl,
|
||||
.hd-helpdesk-surface[dusk="helpdesk-settings-manager"] > .grid > a .text-2xl {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
/* Configuration forms */
|
||||
.hd-core-settings form .grid,
|
||||
.hd-helpdesk-surface form .grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
.hd-core-settings input,
|
||||
.hd-core-settings select,
|
||||
.hd-core-settings textarea,
|
||||
.hd-helpdesk-surface input,
|
||||
.hd-helpdesk-surface select,
|
||||
.hd-helpdesk-surface textarea {
|
||||
min-height: 2.8rem;
|
||||
font-size: 16px !important; /* prevents iOS input zoom */
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface textarea {
|
||||
min-height: 8rem;
|
||||
}
|
||||
|
||||
/* Search/filter bars */
|
||||
.hd-helpdesk-surface .grid.md\:grid-cols-4,
|
||||
.hd-helpdesk-surface .grid.lg\:grid-cols-4,
|
||||
.hd-helpdesk-surface .grid.xl\:grid-cols-4 {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
/* Tables remain usable rather than crushing columns. */
|
||||
.hd-helpdesk-surface .overflow-x-auto,
|
||||
.hd-core-settings .overflow-x-auto {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface table,
|
||||
.hd-core-settings table {
|
||||
min-width: 760px;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface th,
|
||||
.hd-helpdesk-surface td,
|
||||
.hd-core-settings th,
|
||||
.hd-core-settings td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Ticket list table gets a slightly smaller minimum than config tables. */
|
||||
.hd-helpdesk-surface[dusk="helpdesk-ticket-index"] table {
|
||||
min-width: 680px;
|
||||
}
|
||||
|
||||
/* Action button groups wrap instead of overflowing. */
|
||||
.hd-helpdesk-surface td .flex,
|
||||
.hd-core-settings td .flex {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Ticket show page */
|
||||
.hd-helpdesk-surface .xl\:grid-cols-\[minmax\(0\,1fr\)_20rem\],
|
||||
.hd-helpdesk-surface .lg\:grid-cols-\[minmax\(0\,1fr\)_20rem\] {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
/* Attachments/code blocks/content */
|
||||
.hd-helpdesk-surface pre,
|
||||
.hd-helpdesk-surface code,
|
||||
.hd-helpdesk-surface .prose {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Kanban: touch-friendly horizontal lanes with scroll snapping. */
|
||||
[data-helpdesk-kanban-board] {
|
||||
display: flex !important;
|
||||
gap: .75rem !important;
|
||||
overflow-x: auto !important;
|
||||
overscroll-behavior-inline: contain;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-padding-left: .75rem;
|
||||
padding-bottom: 1rem !important;
|
||||
margin-inline: -.75rem;
|
||||
padding-inline: .75rem;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
[data-helpdesk-kanban-board] > section {
|
||||
width: min(88vw, 330px) !important;
|
||||
min-width: min(88vw, 330px) !important;
|
||||
min-height: calc(100dvh - 16rem) !important;
|
||||
scroll-snap-align: start;
|
||||
border-radius: 1rem !important;
|
||||
}
|
||||
|
||||
[data-helpdesk-kanban-column] {
|
||||
min-height: 24rem !important;
|
||||
}
|
||||
|
||||
[data-helpdesk-kanban-ticket] {
|
||||
cursor: default !important;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
.hd-kanban-mobile-move {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Board selector */
|
||||
.hd-select-wrap,
|
||||
.hd-ticket-board-select-wrap {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Modal/dialog safety */
|
||||
[role="dialog"],
|
||||
[data-flux-modal] {
|
||||
max-width: calc(100vw - 1.5rem) !important;
|
||||
max-height: calc(100dvh - 1.5rem) !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479px) {
|
||||
.hd-helpdesk-surface,
|
||||
.hd-helpdesk-surface.hd-mobile-ready {
|
||||
padding-left: .55rem;
|
||||
padding-right: .55rem;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface .bg-gradient-to-br .flex.flex-wrap.gap-2 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hd-core-settings > .grid,
|
||||
.hd-helpdesk-surface[dusk="helpdesk-settings-manager"] > .grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
[data-helpdesk-kanban-board] > section {
|
||||
width: 91vw !important;
|
||||
min-width: 91vw !important;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface .text-3xl,
|
||||
.hd-helpdesk-surface .text-4xl {
|
||||
font-size: 1.55rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch-only devices: rely on mobile status selector instead of requiring DnD. */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
[data-helpdesk-kanban-ticket] {
|
||||
-webkit-user-drag: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.hd-kanban-mobile-move {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user