Skip to content

fix(web): stop the sidebar update icon from rendering clipped - #282

Merged
elkaix merged 2 commits into
mainfrom
fix/web-sidebar-update-icon-clipped
Sep 4, 2026
Merged

fix(web): stop the sidebar update icon from rendering clipped#282
elkaix merged 2 commits into
mainfrom
fix/web-sidebar-update-icon-clipped

Conversation

@elkaix

@elkaix elkaix commented Sep 4, 2026

Copy link
Copy Markdown
Member

Summary

  • The sidebar update pill is a 32px inline-grid with overflow: hidden. The hidden nowrap label shares the icon's grid cell, so the track grew to the label's width, the icon was centred in that oversized track, and the visible part was a clipped half green circle. The track is now pinned with grid-template-columns: minmax(0, 1fr) and both items get min-width: 0.
  • Sidebar logo width reduced from 220px to 200px.
  • dist-web bundle restaged.

Test plan

  • app-shell-contracts.test.ts updated: new guards for the grid track + min-width: 0, logo width pinned to 200px.
  • pnpm run build:web

Summary by CodeRabbit

  • Bug Fixes

    • Fixed the sidebar update notification icon so it remains fully visible without clipping.
    • Improved update notification layout across different sidebar widths.
  • Style

    • Reduced the maximum sidebar logo width for a more balanced appearance.
  • Chores

    • Refreshed web assets and improved reliability of security audit network requests.

The update pill is a 32px inline-grid with overflow hidden. Its hidden
nowrap label shares the single grid cell, so the track grew to the label
width and the icon was centred in that oversized track, then clipped to a
half circle. Pin the track to the pill width and let both items shrink.

Also shrink the sidebar logo from 220px to 200px.
@coderabbitai

coderabbitai Bot commented Sep 4, 2026

Copy link
Copy Markdown

Review Change Stack

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 63f3d2b3-1c35-45a9-b177-08be28749d1a

📥 Commits

Reviewing files that changed from the base of the PR and between ab5793e and bdb8f1d.

📒 Files selected for processing (99)
  • .changeset/sidebar-update-icon-clipped.md
  • .github/workflows/security.yml
  • apps/pythinker-code/dist-web/.web-bundle-manifest.json
  • apps/pythinker-code/dist-web/assets/CodeBlockNode-BLRXfA23.js
  • apps/pythinker-code/dist-web/assets/DesignSystemView-Dwl_jD3y.js
  • apps/pythinker-code/dist-web/assets/Tooltip-BzUUO29Z.js
  • apps/pythinker-code/dist-web/assets/abnfDiagram-VCTEODGH-2EOqIk1O.js
  • apps/pythinker-code/dist-web/assets/arc-CE2HyL6e.js
  • apps/pythinker-code/dist-web/assets/architectureDiagram-5GKGNRK7-CHbzcUpr.js
  • apps/pythinker-code/dist-web/assets/blockDiagram-NRAW4CY4-CztUI52j.js
  • apps/pythinker-code/dist-web/assets/c4Diagram-UCG6FXSJ-503bCt4w.js
  • apps/pythinker-code/dist-web/assets/channel-BcS9Et7G.js
  • apps/pythinker-code/dist-web/assets/channel-Bco9eyIO.js
  • apps/pythinker-code/dist-web/assets/chunk-2Q5K7J3B-BCQG4Y8C.js
  • apps/pythinker-code/dist-web/assets/chunk-5VM5RSS4-BDW-nqST.js
  • apps/pythinker-code/dist-web/assets/chunk-F27PBJKO-DYe5g1-X.js
  • apps/pythinker-code/dist-web/assets/chunk-G27WJ6UU-B-tPfhPW.js
  • apps/pythinker-code/dist-web/assets/chunk-JWPE2WC7-CMXpKtUK.js
  • apps/pythinker-code/dist-web/assets/chunk-LCL6LL3I-DgzNQ-ud.js
  • apps/pythinker-code/dist-web/assets/chunk-POPQ4Y6H-GsFeZpCK.js
  • apps/pythinker-code/dist-web/assets/chunk-SVP7TREG-BpNSWupy.js
  • apps/pythinker-code/dist-web/assets/chunk-XXDRQBXY-DfTItAd9.js
  • apps/pythinker-code/dist-web/assets/classDiagram-DTDB5LWJ-DixvVbzR.js
  • apps/pythinker-code/dist-web/assets/classDiagram-DTDB5LWJ-DwqMTjXf.js
  • apps/pythinker-code/dist-web/assets/classDiagram-v2-JRS7N3AN-DixvVbzR.js
  • apps/pythinker-code/dist-web/assets/classDiagram-v2-JRS7N3AN-DwqMTjXf.js
  • apps/pythinker-code/dist-web/assets/cose-bilkent-JH36ORCC-CTXJ13Rk.js
  • apps/pythinker-code/dist-web/assets/cssMode-mJd9LOf5.js
  • apps/pythinker-code/dist-web/assets/cynefin-OW5HDTMX-hK0zyhBN.js
  • apps/pythinker-code/dist-web/assets/cynefinDiagram-5FMLGOSQ-B8WoOi3S.js
  • apps/pythinker-code/dist-web/assets/dagre-3AP2YEHR-BaH095fp.js
  • apps/pythinker-code/dist-web/assets/diagram-S7CK7UJ4-DXmY6VHa.js
  • apps/pythinker-code/dist-web/assets/diagram-UQ7AKVKN-DfuQ1wyT.js
  • apps/pythinker-code/dist-web/assets/diagram-VSXAHHWV-BMe4YZka.js
  • apps/pythinker-code/dist-web/assets/diagram-VX7I27RA-C56Sx2zr.js
  • apps/pythinker-code/dist-web/assets/diagram-Z3DM3KII-DQ1BJwHK.js
  • apps/pythinker-code/dist-web/assets/ebnfDiagram-PWID7BFC-Bv02Ml34.js
  • apps/pythinker-code/dist-web/assets/editor.main-CrGvTh6f.js
  • apps/pythinker-code/dist-web/assets/erDiagram-SSCWMZ5O-BhUwFFTg.js
  • apps/pythinker-code/dist-web/assets/flowDiagram-A5DVABFB-CluS0a0F.js
  • apps/pythinker-code/dist-web/assets/freemarker2-CsO5eE_R.js
  • apps/pythinker-code/dist-web/assets/ganttDiagram-EL5Y4UJY-C33nLlYq.js
  • apps/pythinker-code/dist-web/assets/gitGraphDiagram-WWUBYQGX-CQVHlzYl.js
  • apps/pythinker-code/dist-web/assets/handlebars-C9piLYXz.js
  • apps/pythinker-code/dist-web/assets/html-BofawXVq.js
  • apps/pythinker-code/dist-web/assets/htmlMode-C7YfEYqH.js
  • apps/pythinker-code/dist-web/assets/index-B8-p28qH.css
  • apps/pythinker-code/dist-web/assets/index-CYPUl61v.js
  • apps/pythinker-code/dist-web/assets/index-CwThccaj.js
  • apps/pythinker-code/dist-web/assets/index-Do-sIIwZ.js
  • apps/pythinker-code/dist-web/assets/index-DsImyV0d.css
  • apps/pythinker-code/dist-web/assets/index-FF3u9Q6E.js
  • apps/pythinker-code/dist-web/assets/index10-C_bjOtVG.js
  • apps/pythinker-code/dist-web/assets/index11-BoWtuHZ9.js
  • apps/pythinker-code/dist-web/assets/index5--va-v8l1.js
  • apps/pythinker-code/dist-web/assets/index6-s0p2bKmW.js
  • apps/pythinker-code/dist-web/assets/index7-DhaUCaNa.js
  • apps/pythinker-code/dist-web/assets/index8-DTAhSDwN.js
  • apps/pythinker-code/dist-web/assets/infoDiagram-RXCK75RN-D-mw1FfA.js
  • apps/pythinker-code/dist-web/assets/ishikawaDiagram-5VMMS53U-Bv2NmO_c.js
  • apps/pythinker-code/dist-web/assets/javascript-cGmfMxZm.js
  • apps/pythinker-code/dist-web/assets/journeyDiagram-EYS64GPL-CXh2PhCd.js
  • apps/pythinker-code/dist-web/assets/jsonMode-CJk8iYWE.js
  • apps/pythinker-code/dist-web/assets/kanban-definition-3QL26DDD-CIFSC8MX.js
  • apps/pythinker-code/dist-web/assets/layout-BJVZ-FCi.js
  • apps/pythinker-code/dist-web/assets/linear-tkUgP5uS.js
  • apps/pythinker-code/dist-web/assets/liquid-FEXnWUYl.js
  • apps/pythinker-code/dist-web/assets/lspLanguageFeatures-CmeEQivf.js
  • apps/pythinker-code/dist-web/assets/mdx-6mBhBalM.js
  • apps/pythinker-code/dist-web/assets/mermaid.core-BS7210G1.js
  • apps/pythinker-code/dist-web/assets/mindmap-definition-FBJOCRG2-CU_ZxBzp.js
  • apps/pythinker-code/dist-web/assets/pegDiagram-XKGWAZYB-DJkHttsI.js
  • apps/pythinker-code/dist-web/assets/pieDiagram-E7YTZNPT-DYaldCTj.js
  • apps/pythinker-code/dist-web/assets/python-CZPdacFd.js
  • apps/pythinker-code/dist-web/assets/quadrantDiagram-AXDQQJYC-BtPrhZI1.js
  • apps/pythinker-code/dist-web/assets/railroadDiagram-O6MQD6OU-CpgcTaSn.js
  • apps/pythinker-code/dist-web/assets/razor-DpvjxQpA.js
  • apps/pythinker-code/dist-web/assets/requirementDiagram-EFPCY7ZU-BiQL8B0s.js
  • apps/pythinker-code/dist-web/assets/sankeyDiagram-P5KCCOFB-B8hzMrLk.js
  • apps/pythinker-code/dist-web/assets/sequenceDiagram-WJ2MYXX4-Ba4P-Obt.js
  • apps/pythinker-code/dist-web/assets/sizeCapture-X5ZJPWSS-BKsD6IrZ.js
  • apps/pythinker-code/dist-web/assets/stateDiagram-HBIQ2CUA-yrLGb1y9.js
  • apps/pythinker-code/dist-web/assets/stateDiagram-v2-4QOOHH4V-D4CYDlxF.js
  • apps/pythinker-code/dist-web/assets/stateDiagram-v2-4QOOHH4V-D77mTk5U.js
  • apps/pythinker-code/dist-web/assets/swimlanes-XN3QIQJK-BMm5NuAC.js
  • apps/pythinker-code/dist-web/assets/swimlanesDiagram-VK2B7HYN-DBZUJp9f.js
  • apps/pythinker-code/dist-web/assets/swimlanesDiagram-VK2B7HYN-Dg40A8ij.js
  • apps/pythinker-code/dist-web/assets/timeline-definition-24CTP7MA-DBuc6xWS.js
  • apps/pythinker-code/dist-web/assets/tsMode-BfpSXWe6.js
  • apps/pythinker-code/dist-web/assets/typescript-B6F7Oqgd.js
  • apps/pythinker-code/dist-web/assets/vennDiagram-4TSXK5OY-DSHseOAo.js
  • apps/pythinker-code/dist-web/assets/vue.runtime.esm-bundler-Eu3o2njT.js
  • apps/pythinker-code/dist-web/assets/wardleyDiagram-VM6X3IG4-DOz-_nTz.js
  • apps/pythinker-code/dist-web/assets/xml-Ci3SHGV4.js
  • apps/pythinker-code/dist-web/assets/xychartDiagram-S5SC5T6Z-DgT7Q8ZQ.js
  • apps/pythinker-code/dist-web/assets/yaml-CnlC_5gz.js
  • apps/pythinker-code/dist-web/index.html
  • apps/pythinker-web/src/components/Sidebar.vue
  • apps/pythinker-web/test/app-shell-contracts.test.ts
 ______________________________________________________________
< Your API returns 200 OK; the logic returns 404 Common Sense. >
 --------------------------------------------------------------
  \
   \   (\__/)
       (•ㅅ•)
       /   づ

Comment @coderabbitai help to get the list of available commands.

Comment thread apps/pythinker-code/dist-web/assets/chunk-G27WJ6UU-B-tPfhPW.js
Comment thread apps/pythinker-code/dist-web/assets/chunk-G27WJ6UU-B-tPfhPW.js
@pkg-pr-new

pkg-pr-new Bot commented Sep 4, 2026

Copy link
Copy Markdown
pnpm dlx https://pkg.pr.new/@pymodel/pythinker-code@bdb8f1d
npx https://pkg.pr.new/@pymodel/pythinker-code@bdb8f1d

commit: bdb8f1d

The npm registry occasionally times out during pnpm audit, causing
the Security audit required check to fail with ERR_SOCKET_TIMEOUT.

Add fetch timeout (120s) and retry config (3 retries with 20–120s
backoff) via npm_config env vars to make the step resilient to
transient network issues.
@elkaix
elkaix merged commit 6b15308 into main Sep 4, 2026
24 of 25 checks passed
@elkaix
elkaix deleted the fix/web-sidebar-update-icon-clipped branch September 4, 2026 03:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant