.org-todo-root { padding: 0 8px; } .org-todo-filterwrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; border: 1px solid var(--background-modifier-border); border-radius: 6px; padding: 4px 6px; margin-bottom: 8px; } .org-todo-pills { display: contents; /* pills participate directly in the wrap's flex layout */ } .org-todo-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78em; padding: 2px 6px; border-radius: 10px; background: var(--interactive-accent); color: var(--text-on-accent); white-space: nowrap; } .org-todo-pill-x { cursor: pointer; font-weight: bold; opacity: 0.8; } .org-todo-pill-x:hover { opacity: 1; } .org-todo-filter { flex: 1; min-width: 80px; border: none; outline: none; background: transparent; } .org-todo-toggle { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 0.85em; color: var(--text-muted); } .org-todo-tagbar { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; margin-bottom: 10px; padding-bottom: 4px; /* breathing room for the scrollbar */ } .org-todo-chip { flex: 0 0 auto; /* don't let chips shrink — keep them scrollable */ white-space: nowrap; /* chip label stays on one line */ font-size: 0.8em; padding: 2px 8px; border-radius: 12px; border: 1px solid var(--background-modifier-border); background: var(--background-secondary); cursor: pointer; } .org-todo-chip.is-active { background: var(--interactive-accent); color: var(--text-on-accent); } .org-todo-list { position: relative; overflow-y: auto; height: 100%; /* the scroll viewport — must have a bounded height */ } .org-todo-spacer { position: relative; width: 100%; } .org-todo-rows { position: absolute; top: 0; left: 0; right: 0; } .org-todo-row { display: flex; align-items: center; /* center, not baseline — fixed height now */ gap: 6px; height: 28px; /* MUST equal ROW_H */ box-sizing: border-box; padding: 0; border-bottom: 1px solid var(--background-modifier-border-hover); } .org-todo-text { cursor: pointer; flex: 1; white-space: nowrap; /* truncation: no wrap... */ overflow: hidden; text-overflow: ellipsis; /* ...show ellipsis instead */ min-width: 0; /* lets flex item actually shrink to ellipsis */ } .org-todo-text { cursor: pointer; flex: 1; } .org-todo-text.is-done { text-decoration: line-through; color: var(--text-muted); } .org-todo-rowtag { font-size: 0.75em; font-style: italic; color: var(--text-accent); } .org-todo-date { font-size: 0.75em; color: var(--text-muted); } .org-todo-empty { color: var(--text-muted); padding: 8px 0; }