webui: convert sketch-container-status to use tailwind
Convert sketch-container-status component from shadowDOM CSS to Tailwind classes
while preserving the original visual styling and functionality.
- Inherit from SketchTailwindElement instead of LitElement to disable shadowDOM
- Replace static styles CSS with equivalent Tailwind utility classes
- Update pulse animation to use document-level CSS since Tailwind doesn't support custom keyframes inline
- Convert all layout, typography, color, and spacing properties to Tailwind equivalents
- Update DOM queries from shadowRoot to direct element queries due to disabled shadowDOM
- Preserve all interactive functionality including info panel expansion and commit copying
- Maintain visual consistency with original design including hover states and transitions
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s7f97a079a6dd14c1k
diff --git a/webui/src/web-components/demo/sketch-container-status.demo.html b/webui/src/web-components/demo/sketch-container-status.demo.html
index 0945d70..3b5725b 100644
--- a/webui/src/web-components/demo/sketch-container-status.demo.html
+++ b/webui/src/web-components/demo/sketch-container-status.demo.html
@@ -2,6 +2,7 @@
<head>
<title>sketch-container-status demo</title>
<link rel="stylesheet" href="demo.css" />
+ <link rel="stylesheet" href="/src/tailwind.css" />
<script type="module" src="../sketch-container-status.ts"></script>
<script>