/* ============================================================ MOBILE — sidebar becomes a slide-out drawer behind a burger. Burger + scrim live on (hidden here, shown below). The `drawer-open` class is toggled by drawer_controller on . ============================================================ */ .cl-burger, .cl-scrim { display: none; } /* Below the desktop width, the three-across card grids get cramped — drop the Pages index and Customers index to two columns. Kept above the 760px block so the single-column phone rule (later, equal specificity) still wins there. minmax(0, 1fr) so a long, non-wrapping card title ellipsises instead of widening its column past the viewport. */ @media (max-width: 1024px) { .cl-grid, .pg-folders { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { /* Utility: hide an element on phones (e.g. the "New " word on tight buttons). */ .hide-mobile { display: none; } /* Customer contact card: on phones the fixed name column + two flexible meta columns don't fit and overlap. Let the row wrap and each meta block take a full-width line beneath the name. */ .cust-contact { flex-wrap: wrap; } .cust-contact .info { min-width: 0; flex: 1; } .cust-contact .meta { flex-basis: 100%; } /* burger: fixed top-left, floats above the content of either shell. Only shown when the page actually has a sidebar (e.g. not on login). */ body:has(.cl-side) .cl-burger { position: fixed; top: 11px; left: 11px; z-index: 140; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--paper); color: var(--ink); cursor: pointer; } .cl-burger svg { width: 19px; height: 19px; } /* sidebar slides in from the left; fixed so .cl-app overflow can't clip it */ .cl-side { position: fixed; z-index: 200; top: 0; bottom: 0; left: 0; width: 280px; max-width: 84vw; transform: translateX(-100%); transition: transform .3s cubic-bezier(.22, .61, .36, 1); } body.drawer-open .cl-side { transform: translateX(0); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .5); } /* the drawer has a fixed width — no resizing on mobile */ .cl-side-resize { display: none; } /* scrim covers the content while the drawer is open */ body:has(.cl-side) .cl-scrim { display: block; position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .3s; } body.drawer-open .cl-scrim { opacity: 1; pointer-events: auto; } /* sidebar search drops to the drawer width */ .cl-search-wrap { flex: 1 1 auto; } .cl-search-results { width: auto; right: 0; } .kb-main { padding: 60px 10px 40px; } /* Slim the body gutter down to the burger's edge (~10px) */ .cl-scroll, .tasks-scroll, .cust-tabs, .cl-subnav { padding-left: 10px; padding-right: 10px; } /* The task view-style switcher is a desktop nicety; hide it on mobile. */ .view-toggle { display: none; } /* iOS Dynamic Type: grow the main reading text with the user's system text size. --dyn is set by the dynamic-type controller (defaults to 1, i.e. no change, on browsers that don't expose the setting). Applied to the content text only — chrome/labels stay put so the layout holds. */ .task-row__text { font-size: calc(14px * var(--dyn, 1)); } .cl-cmt .bd .kb-call-comment__md { font-size: calc(13.5px * var(--dyn, 1)); } .cl-card h3 { font-size: calc(16px * var(--dyn, 1)); } .cl-card .co { font-size: calc(12.5px * var(--dyn, 1)); } /* The header is the top row of the pane, so reserve room for the fixed burger on its left. */ .cl-head { padding: var(--sp-4) var(--sp-5) var(--sp-4) 62px; gap: var(--sp-5); } /* Shrink the title and stack the italic subtitle beneath it, so the two-line heading sits neatly beside the burger and leaves room for the action button. */ .cl-head h1 { font-size: var(--fs-7); line-height: 1.1; } .cl-head h1 em, .cl-head h1 .cl-head-date { display: block; margin-left: 0; font-size: 15px; line-height: 1.15; } .cl-card .cl-card__top { margin-bottom: 0; } .cl-card .meta2 { display: none; } /* Card grids collapse to a single column (Pages, Customers, customer Pages tab). minmax(0, 1fr) — not a bare 1fr — so the column can't grow past the viewport to fit a long, non-wrapping card title; the title ellipsises instead. */ .cl-grid, .pg-folders, .cust-pagegrid { grid-template-columns: minmax(0, 1fr); } /* Calls list: drop the caller avatar to reclaim width… */ .kb-call__avatar-cell { display: none; } /* …and let the contact column shrink and wrap instead of holding a 200px floor, which pushed the table wider than the viewport and shoved the time + comments columns off-screen (forcing a horizontal scroll). Long names / company strings break rather than overflow. */ .kb-call__contact { min-width: 0; } .kb-call__contact-name, .kb-call__contact-company, .kb-call__contact-job-title { overflow-wrap: anywhere; } /* The transcript headline is single-line + ellipsis on desktop; on mobile let it wrap (clamped to two lines) so its nowrap width can't force the table wider than the screen. */ .cl-tr-headline { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* …and pull the comments thread left so its avatars sit under the call-status icon (first column) instead of the contact column. */ .cl-thread { margin-left: 0; padding-left: var(--sp-2); } .cl-cmt::before, .cl-addcmt::before { display: none; } .cl-cmt { gap: 14px; } /* Tabs (customer detail) scroll horizontally rather than wrap/squeeze */ .cust-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .cust-tabs::-webkit-scrollbar { display: none; } .cust-tab { flex: none; white-space: nowrap; } /* Tasks list on a phone: the row already stacks its title, meta line and description inside the body column, so just tighten the outer gap/padding. */ .task-row { column-gap: var(--sp-4); padding-inline: var(--sp-3); } /* Knowledge-base blocks: the edit/delete handle normally sits in a left gutter that only appears on :hover — neither exists on touch, so there's no way to reach a block's menu. Pin an always-visible grip to each block's top-right corner instead (out of the content flow, so nothing indents) and open its menu right-aligned so it can't run off the screen edge. Locked (read-only) pages still hide it via the !important rule above. */ .kb-block__side-actions { position: absolute; top: 0; right: 0; left: auto; width: auto; margin: 0; padding: 0; opacity: 1; z-index: 20; } .kb-block__handle { background: var(--paper); border: 1px solid var(--line); } .kb-block__actions-menu { left: auto; right: 0; } .kb-block__submenu { left: auto; right: 100%; } } @media (prefers-reduced-motion: reduce) { .cl-side, .cl-scrim { transition: none; } }