update

ts_web/elements/dees-dataview-codebox.demo.ts

@@ -141,7 +141,7 @@ data = await processor.process_data([{'id': 1}, {'id': 2}])
     
     <div class="section">
       <div class="section-title">CSS Example</div>
-      <div class="section-description">Modern CSS with custom properties and animations.</div>
+      <div class="section-description">Modern CSS with custom properties and animations. Note the shorter language label.</div>
       <dees-dataview-codebox proglang="css">
 /* Modern CSS with custom properties */
 :root {
@@ -169,6 +169,29 @@ data = await processor.process_data([{'id': 1}, {'id': 2}])
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
+}
+      </dees-dataview-codebox>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">JSON Example</div>
+      <div class="section-description">JSON configuration with proper formatting.</div>
+      <dees-dataview-codebox proglang="json">
+{
+  "name": "@design.estate/dees-catalog",
+  "version": "1.10.7",
+  "description": "A comprehensive catalog of web components",
+  "main": "dist_ts_web/index.js",
+  "type": "module",
+  "scripts": {
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
+    "watch": "tswatch element",
+    "test": "tstest test/ --web --verbose"
+  },
+  "dependencies": {
+    "@design.estate/dees-element": "^2.0.45",
+    "highlight.js": "^11.9.0"
+  }
 }
       </dees-dataview-codebox>
     </div>

ts_web/elements/dees-dataview-codebox.ts

@@ -82,28 +82,34 @@ export class DeesDataviewCodebox extends DeesElement {
         }
 
         .bottomBar {
+          position: relative;
           color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
           background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
           border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
           height: 28px;
           font-size: 12px;
           line-height: 28px;
-          text-align: right;
+          display: flex;
-          padding-right: 100px;
+          justify-content: flex-end;
+          align-items: stretch;
+          overflow: hidden;
+        }
+
+        .spacesLabel {
+          padding: 0 16px;
+          display: flex;
+          align-items: center;
         }
 
         .languageLabel {
           color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
           font-size: 12px;
           line-height: 28px;
-          z-index: 10;
           background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
-          display: inline-block;
+          padding: 0px 16px;
-          position: absolute;
-          bottom: 0px;
-          right: 0px;
-          padding: 0px 16px 0px 8px;
           font-weight: 500;
+          display: flex;
+          align-items: center;
         }
 
         .hljs-keyword {
@@ -215,7 +221,7 @@ export class DeesDataviewCodebox extends DeesElement {
           <pre><code></code></pre>
         </div>
         <div class="bottomBar">
-          Spaces: 2
+          <div class="spacesLabel">Spaces: 2</div>
           <div class="languageLabel">${this.progLang}</div>
         </div>
       </div>