fix: update component style

packages/sciux/package.json

@@ -31,7 +31,6 @@
   },
   "dependencies": {
     "@sciux/layout": "workspace:*",
-    "@sciux/math": "workspace:*",
     "@sciux/model": "workspace:*",
     "@sciux/widget": "workspace:*",
     "sciux-laplace": "catalog:"

packages/widget/src/canvas.ts

@@ -17,8 +17,10 @@ export default defineComponent<'canvas', typeof CanvasType.infer>((attrs) => {
     setup(children) {
       const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
       svg.setAttribute('viewBox', `0 0 ${attrs.width.value} ${attrs.height.value}`)
-      svg.setAttribute('width', '100%')
-      svg.style.aspectRatio = (attrs.width.value / attrs.height.value).toString()
+
+      svg.style.height = attrs.height.value.toString()
+      svg.style.width = attrs.width.value.toString()
+
       const root = document.createElementNS('http://www.w3.org/2000/svg', 'g')
       root.setAttribute('transform', `translate(${attrs.origin.value.join(',')})`)
       root.append(...children())

packages/widget/src/code.ts

@@ -18,16 +18,19 @@ export default defineComponent<'code', typeof T.infer>((attrs) => {
     attrs: T,
     setup(children) {
       const container = document.createElement('div')
-      container.style.width = '100%'
-      container.style.height = '100%'
       const kids = children()
       // Filter out text nodes
       const content = kids[0].textContent ?? ''
       const html = highlighter.codeToHtml(content, {
         lang: attrs.language.value,
         theme: 'github-dark',
       })
-      container.innerHTML = html
+
+      container.innerHTML = html;
+
+      (container.childNodes[0] as HTMLElement).style.paddingLeft = '1rem';
+      (container.childNodes[0] as HTMLElement).style.paddingRight = '1rem'
+
       return container
     },
   }