OpenClaw "open in canvas" 패널 스크롤 안 되는 문제 해결 방법 (CSS 패치)

8월 06, 2026

OpenClaw를 쓰다 발견한 버그와 해결법을 공유합니다. 같은 문제로 고생하시는 분들께 도움이 되길 바랍니다.

🐛 어떤 문제인가요?

OpenClaw 대시보드(Control UI)에서 채팅 메시지의 "open in canvas" 버튼을 누르면 오른쪽에 Markdown 미리보기 패널이 열립니다.

그런데 이 패널이 원본 소스 자체의 버그로 인해:

  • ❌ 내용이 길어도 스크롤이 안 됨 (휠/드래그 모두 불가)
  • ❌ 패널 높이가 콘텐츠만큼만 줄어들고 아래가 빈 여백
  • ❌ 패널 폭이 좁아 표(table)/코드 블록이 잘림

원인은 OpenClaw Control UI의 flexbox 레이아웃에서 내부 래퍼 div에 높이가 없어서 .sidebar-content의 스크롤이 깨지는 것입니다. (아이콘 커스터마이징 등과 무관한 업스트림 버그 — 원본 상태에서도 동일하게 발생합니다)


✅ 해결 방법 (3단계)

1단계 - 오픈클로에 수정시키기

아래 CSS를 복사해서 ~/.openclaw/control-ui-red/assets/index-LH4ofOKi.css 파일 맨 끝에 붙여넣기 하세요.

/* ===== OpenClaw UI Fix: sidebar markdown scroll + horizontal ===== */
.chat-split-container{height:100% !important;min-height:0 !important}
.chat-workbench{height:100% !important;min-height:0 !important}
.chat-sidebar{height:100% !important;min-height:0 !important;min-width:520px !important;overflow:hidden !important}
openclaw-chat-detail-panel{display:flex !important;flex-direction:column !important;flex:1 !important;min-height:0 !important;height:100% !important}
openclaw-chat-detail-panel > div{display:flex !important;flex-direction:column !important;flex:1 1 auto !important;min-height:0 !important;height:100% !important}
.sidebar-panel{flex:1 1 auto !important;min-height:0 !important;height:100% !important}
.sidebar-header{flex:none !important}
.sidebar-content{flex:1 1 0 !important;min-height:0 !important;height:auto !important;overflow-y:auto !important;overflow-x:hidden !important}
.sidebar-markdown-shell{min-height:0 !important}
.sidebar-markdown-reader{overflow:visible !important}
.sidebar-markdown :where(pre){overflow-x:auto !important;max-width:100% !important}
.sidebar-markdown :where(code){white-space:pre !important;overflow-wrap:normal !important}
.sidebar-markdown :where(table){display:block !important;overflow-x:auto !important;max-width:100% !important;width:max-content !important;min-width:100% !important}
.sidebar-markdown :where(pre code){white-space:pre !important}
.sidebar-markdown :where(pre){scrollbar-width:thin !important;scrollbar-color:rgba(128,128,128,.6) transparent !important}
.sidebar-markdown :where(pre)::-webkit-scrollbar{height:10px !important;-webkit-appearance:none !important}
.sidebar-markdown :where(pre)::-webkit-scrollbar-thumb{background:rgba(128,128,128,.55) !important;border-radius:5px !important}
.sidebar-markdown :where(pre)::-webkit-scrollbar-track{background:rgba(0,0,0,.06) !important}
.sidebar-markdown :where(table){scrollbar-width:thin !important;scrollbar-color:rgba(128,128,128,.6) transparent !important}
.sidebar-markdown :where(table)::-webkit-scrollbar{height:10px !important;-webkit-appearance:none !important}
.sidebar-markdown :where(table)::-webkit-scrollbar-thumb{background:rgba(128,128,128,.55) !important;border-radius:5px !important}


⚠️ 2단계 (가장 중요!) — 서비스워커 캐시 갱신

CSS만 바꾸면 안 보입니다. OpenClaw는 서비스워커가 CSS를 캐시하기 때문입니다.

파일 ~/.openclaw/control-ui-red/sw.js 에서:

const EMBEDDED_CACHE_VERSION = "2026.7.1-2-0790d9f593ad-cssfixN";

맨 끝의 cssfixN 숫자를 하나 올려주세요 (예: cssfix1 → cssfix2). 이게 없으면 예전 CSS가 계속 로드됩니다.


3단계 — 게이트웨이 재시작

openclaw gateway restart

그리고 Control UI 탭을 완전히 닫고 다시 열면 적용 완료! 🎉

📌 요약

  1. CSS 패치를 index-LH4ofOKi.css 끝에 붙여넣기
  2. sw.js의 cssfixN 숫자 올리기 (안 하면 캐시 때문에 무효!)
  3. openclaw gateway restart + 탭 닫고 재오픈

혹시 OpenClaw 업데이트 후 패치가 사라지면, 같은 CSS를 다시 붙여넣고 cssfixN 숫자를 올리면 됩니다. 



 

댓글 쓰기 · 수정

0 댓글