/* ========================================================================== Varelyno: phone layout (5 Oct 2026). Loaded last, so it has the final say on small screens. One place for every phone fix, grouped by screen. ========================================================================== */ @media (max-width:760px){ /* ---------------------------------------------------- project page hero */ /* The title column had no minimum width: with a short progress line on the right, the circle and the progress shared a row and squeezed the title into a thin column, one syllable a line (live test, 5 Oct). */ #mainContent .hero{display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:12px 14px;align-items:center} #mainContent .hero>.project-orb,#mainContent .hero>.project-image{width:72px!important;height:72px!important;padding:6px!important;grid-column:1;grid-row:1} #mainContent .hero>.project-orb strong{font-size:9.5px!important} #mainContent .hero>.hero-main{grid-column:2;grid-row:1;min-width:0} #mainContent .hero>.hero-actions{grid-column:1/-1;width:100%;max-width:none;min-width:0} #mainContent .hero h1{font-size:clamp(20px,6vw,26px)!important;line-height:1.15;overflow-wrap:anywhere;hyphens:auto} #mainContent .hero .hero-main>p{grid-column:1/-1} } @media (max-width:760px){ /* ---------------------------------------------------------- task lists */ /* Each task was a tall card, one line per field. Now: tick, title and the buttons on top; person, project, priority and due as small chips below. */ #mainContent .tasks-table tr{display:flex!important;flex-wrap:wrap;align-items:flex-start;gap:4px 6px;padding:11px 12px!important;min-height:0!important} #mainContent .tasks-table thead{display:none} #mainContent .tasks-table td{display:block!important;padding:0!important;border:0!important;width:auto!important;min-height:0!important} #mainContent .tasks-table tr{position:relative;padding-left:54px!important} #mainContent .tasks-table td.task-completion{position:absolute!important;left:22px;top:12px} #mainContent .tasks-table td.task-completion::before{left:-12px!important;top:0!important} #mainContent .tasks-table tr::after{content:"";order:2;flex:0 0 100%;height:0} #mainContent .tasks-table td.task-title{order:1;flex:1 1 0;min-width:0;font-size:14.5px!important;line-height:1.35;font-weight:650} #mainContent .tasks-table td.task-edit{order:1;flex:none;display:flex!important;gap:4px} #mainContent .tasks-table td[data-label]{order:3;flex:none;display:inline-flex!important;align-items:center;gap:4px;font-size:12px!important; padding:2px 8px!important;border-radius:999px;background:color-mix(in srgb,var(--text,#10213c) 6%,transparent);color:var(--muted,#5b6878);max-width:100%;overflow:hidden} #mainContent .tasks-table td[data-label]::before{display:none!important} #mainContent .tasks-table td[data-label="Due"]::before{content:"Due "!important;display:inline!important;opacity:.75} #mainContent .tasks-table td[data-label] .btn{font-size:12px!important;padding:0!important;min-height:0!important;height:auto!important;white-space:normal;overflow-wrap:anywhere;text-align:left;max-width:100%} #mainContent .tasks-table td[data-label] .priority-badge{font-size:11px;padding:0 6px} #mainContent .tasks-table td[data-label="Priority"]{padding:0!important;background:none} #mainContent .tasks-table td.overdue{color:#b42318;background:color-mix(in srgb,#b42318 9%,transparent)} #mainContent .tasks-table td[data-label="Person"]:not(:has(button,a)){display:none!important} #mainContent .tasks-table td[data-label="Project"]:not(:has(button,a)){display:none!important} } @media (max-width:760px){ /* --------------------------------------------------------- calendar */ #mainContent .v10cal-day.istoday .v10cal-num{display:inline-grid!important;place-items:center;width:24px!important;height:24px;padding:0!important;border-radius:50%} /* ------------------------------------------------------ project cards */ /* One project filled the screen; the circle is drawn a little smaller. */ #mainContent .vc-card .vc-map{zoom:.8} /* ------------------------------------------------- hub map filters */ #mainContent .hub-map-panel select,#mainContent .hub-map-panel input[type=search],#mainContent .hub-map-panel input[type=text]{min-width:0;width:100%} } @media (max-width:760px){ /* ---------------------------------------------------------------- inbox */ /* The paperclip had a line of its own under the buttons in every card. */ #mainContent .v8-inbox-item{position:relative} #mainContent .v8-inbox-item>.att-count{position:absolute;right:12px;bottom:14px;margin:0!important} #mainContent .v8-inbox-item .v9-inbox-tools{padding-right:48px} } @media (max-width:760px){ /* ----------------------------------------------- search boxes, filters */ #mainContent input[type=search],#mainContent input[placeholder^="Search"]{width:100%!important;max-width:none!important;flex:1 1 100%!important;font-size:16px!important} /* iOS zooms into any field under 16px: every field is 16px on a phone */ input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important} } @media (max-width:760px){ /* ------------------------------------------------------------- classes */ #mainContent .cls-tabs{overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-right:-12px;padding-right:12px} #mainContent .cls-tabs::-webkit-scrollbar{display:none} #mainContent .cls-tabs>button{white-space:nowrap;flex:none} #mainContent .cw-piece-head{flex-wrap:wrap} #mainContent .cw-group select.cw-move{max-width:96px} } @media (max-width:760px){ /* --------------------------------------------- project type, in forms */ /* Six tall cards came before the title: now a compact grid, name only. */ #modal .qip-types{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} #modal .qip-type-card{padding:10px 11px!important;gap:4px!important;min-height:0!important} #modal .qip-type-card small{display:none!important} #modal .qip-type-card b{font-size:13.5px!important;line-height:1.25} /* ------------------------------------------------------------ dialogs */ #modal .modal-body{padding-left:16px!important;padding-right:16px!important} #modal .form-grid{grid-template-columns:minmax(0,1fr)!important} #modal .form-grid .field{grid-column:1/-1!important} #modal .modal-foot{flex-wrap:wrap;gap:8px} #modal .modal-foot .btn{min-height:44px} } /* Phones: the "+ Add" menu was pinned 64px from the top, under a top bar that is 167px tall here, so Person, Project and Task could not be tapped (mobile check, 8 Oct). It opens from the bottom now, like the map Tools. Tablets too: the same pinned rule (app.css, up to 900px) hid Person and Project under their top bar. */ @media (max-width:900px){ #mainContent details.action-menu>.action-menu-pop{position:fixed!important;top:auto!important;left:auto!important;right:12px!important;width:min(420px,calc(100vw - 24px))!important;bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;min-width:0!important;max-height:60svh;overflow:auto;overscroll-behavior:contain;z-index:300!important;padding:8px!important;border-radius:18px!important} #mainContent details.action-menu>.action-menu-pop>button{min-height:44px;width:100%;text-align:left} } /* Map Tools on phones: a shorter sheet that scrolls on its own, filters in one column, a Done button; touching the map closes it (v9.js). It covered the screen and dragging moved the map behind it (user, 8 Oct; first fixed in the demo, now the whole app). */ .v9-tools-done{display:none} @media (max-width:700px){ .v9-tools-body{max-height:44svh!important;padding:0 14px 14px!important;overscroll-behavior:contain;touch-action:pan-y} .v9-tools-body h3{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;margin:0 -14px 6px!important;padding:12px 14px 10px;background:var(--surface,#fff);border-bottom:1px solid var(--line2,#eef1f5);font-size:13px!important} .v9-tools-done{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;border:0;background:var(--nhs,#1f6fa8);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer} .v9-tools-body .form-hint{display:none} .v9-tools-body .hub-filter{flex-basis:100%!important;min-width:0!important} .v9-tools-body .hub-filter select{width:100%} } /* ---------------------------------------------------------- task list tidy (28 Oct) 1. The paperclip sat inside the title as a 40px-tall button (phones make every small button 40px), so a title with it spread its lines far apart. Now it is a small chip that sits on the text line. 2. A phone has no mouse: the hover tint stayed on the last tapped task (a tinted block on the title and buttons). Touch screens skip the hover look. 3. Person, project, priority and due chips share one height and line up. */ @media (max-width:760px){ #mainContent .tasks-table td.task-title .att-count{height:auto!important;min-height:0!important;min-width:0!important; padding:2px 5px!important;margin:0 0 0 6px!important;vertical-align:-3px;line-height:1!important;border-radius:7px} #mainContent .tasks-table td.task-title .att-count svg{width:14px;height:14px} #mainContent .tasks-table td[data-label]{min-height:24px;align-self:center} #mainContent .tasks-table td[data-label="Priority"] .priority-badge{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:999px;line-height:1} } @media (hover:none) and (max-width:760px){ html.v-universe .tasks-table tbody tr.uhl:hover{background:transparent!important;transform:none!important;box-shadow:none!important} html.v-universe .tasks-table tbody tr.uhl:hover>td:not([data-label]){background:transparent!important;border-color:transparent!important} html.v-universe .tasks-table tbody tr.uhl:hover>td[data-label]{border-color:transparent!important;background:color-mix(in srgb,var(--text,#10213c) 6%,transparent)!important} html.v-universe .tasks-table tbody tr.uhl:hover>td[data-label="Priority"]{background:none!important} html.v-universe .tasks-table tbody tr.uhl:hover>td.overdue{background:color-mix(in srgb,#b42318 9%,transparent)!important} } /* ---------------------------------------------------------- task list, one layout (1 Nov) The user, again from an iPhone: the tasks still looked disorganised. Each task wrapped its chips wherever they happened to fit (person and project on one line here, priority and due there), the two 40px buttons squeezed the title into three or four lines, every title carried a paperclip although most tasks have no files, and the colour stripe covered only the top of the task. Now every task reads the same three lines: 1 tick and title, the full width 2 due date and priority, the "..." and edit buttons on the right 3 project and person The stripe runs the task's whole height. The paperclip shows only when the task has files; files are still added from the task's own editor. */ @media (max-width:760px){ #mainContent .tasks-table tr{padding:12px 12px 12px 54px!important;gap:6px!important;align-items:center!important} #mainContent .tasks-table td.task-title{order:1;flex:0 0 100%!important;font-size:15px!important;line-height:1.32} #mainContent .tasks-table td[data-label="Due"]{order:2} #mainContent .tasks-table td[data-label="Priority"]{order:3} #mainContent .tasks-table td.task-edit{order:4;margin-left:auto;gap:4px!important} #mainContent .tasks-table td.task-edit .btn{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important} #mainContent .tasks-table td[data-label="Due"]::before{content:none!important} /* the date chip alone: line 2 fits on a 360px phone */ #mainContent .tasks-table tr::after{order:5} #mainContent .tasks-table td[data-label="Project"]{order:6} #mainContent .tasks-table td[data-label="Person"]{order:7} #mainContent .tasks-table td.task-title .att-count:not(.has-files){display:none!important} #mainContent .tasks-table td.task-completion::before{display:none!important} #mainContent .tasks-table tbody tr::before{content:"";position:absolute;left:10px;top:12px;bottom:12px;width:5px;border-radius:5px;background:var(--hl,var(--card-accent,#9aa8b8))} }