OXYGENHUB

feat(web): sidebar cogs in the card body, beside its first row; sidebars 380 px (closes #166) 26d0d091deb7

Each proposal and issue sidebar card is a two-column grid: the heading's
shaded bar across the top, the body in the first column and the heading's
cog in the second, beside the body's first row. Every sidebar is 380 px,
as the repository page's, so a project line and its cog, and a check and
its status, fit on one line.
Author
Andy McCall @andymccall <[email protected]>
When
· 2026-10-13 20:02 UTC
Signature
✔ signed by Andy McCall
Hash
26d0d091deb7b807245fc3dd435d1460dd6f3301efdccc427cfdd79f4c8246e6
Depends on
61ecbd299f22 7f283f8e8b97 9198231cee96 cb71e18eb6f9 d23464c0ac60
Depended on by
a2ef53c5db26
In bookmarks
api-unknown-fields cancel-landed-runs diffusion-pin-bookmark draft-ready main oh-comment-body-file proposal-list-fast
In tags
v0.5.0 v0.5.1 v0.5.2 v0.6.0 v0.6.1 v0.7.0 v0.8.0 v0.9.0 v0.9.1 v0.9.11 v0.9.15 v0.9.16 v0.9.19 v0.9.2 v0.9.20 v0.9.21 v0.9.22 v0.9.23 v0.9.24 v0.9.3 v0.9.4 v0.9.5 v0.9.6 v0.9.7 v0.9.8 v0.9.9
Edits
3 atoms, 0 tree operations, 1 file

Browse the tree at this change

hide whitespace changes
modified templates/style.css +11 −4
… 
145 unchanged lines
146 146 
pre.marked { background: var(--panel); border: 1px solid var(--bad); padding: 10px 12px; overflow-x: auto; }
147 147 

    

  
    

      148
      148
       
      
/* repository layout */

    

  
    

      149
      
      -
      
.side-layout { display: grid; grid-template-columns: 1fr 280px; gap: 22px; }

    

  
    

      
      149
      +
      
.side-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; }

    

  
    

      150
      150
       
      
.side-layout.rev { grid-template-columns: minmax(0, 1fr) 380px; }

    

  
    

      151
      151
       
      
/* A proposal's conversation: the page is wide for its diffs, but text and

    

  
    

      152
      152
       
      
   the sidebar stay together at a readable width, and the description,

    

  
    

      
      
      …
      
562 unchanged lines

    

  
    

      715
      715
       
      
   heading a shaded bar across the top, as the repository page's cards.

    

  
    

      716
      716
       
      
   Overflow stays visible so the pickers' menus can open past the card. */

    

  
    

      717
      717
       
      
.side-sections { display: flex; flex-direction: column; gap: 14px; }

    

  
    

      718
      
      -
      
.side-sections .side-sec { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 0 12px 10px; }

    

  
    

      719
      718
       
      
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }

    

  
    

      720
      
      -
      
.side-sections .side-sec > .side-head { margin: 0 -12px 10px; padding: 8px 12px; background: var(--soft); border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; }

    

  
    

      721
      
      -
      
.side-sections .side-head h3 { margin: 0; }

    

  
    

      
      719
      +
      
/* Each card a two-column grid: the heading's bar across the top, the

    

  
    

      
      720
      +
      
   body in the first column, and the heading's cog in the second beside

    

  
    

      
      721
      +
      
   the body's first row (Andy, 2026-10-13: the cogs go in the body). The

    

  
    

      
      722
      +
      
   heading's box gives way (display: contents) so its heading and cog are

    

  
    

      
      723
      +
      
   placed in the card's grid. */

    

  
    

      
      724
      +
      
.side-sections .side-sec { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 0 12px 10px; }

    

  
    

      
      725
      +
      
.side-sections .side-sec > * { grid-column: 1; }

    

  
    

      
      726
      +
      
.side-sections .side-sec > .side-head { display: contents; }

    

  
    

      
      727
      +
      
.side-sections .side-sec > .side-head > h3 { grid-column: 1 / -1; grid-row: 1; margin: 0 -12px 10px; padding: 8px 12px; background: var(--soft); border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; }

    

  
    

      
      728
      +
      
.side-sections .side-sec > .side-head > details.menu { grid-column: 2; grid-row: 2; margin-left: 8px; }

    

  
    

      722
      729
       
      
.side-sections .side-sec.side-actions { padding-top: 6px; }

    

  
    

      723
      730
       
      
.side-empty, .side-note { margin: 0; font-size: 12px; color: var(--mute); }

    

  
    

      724
      731
       
      
.side-empty button.linkish { font-size: inherit; }

    

  
    

      
      
      …
      
439 unchanged lines