fix: line number width css should be removed

huozhi · Feb 16, 2025 · 397f25c · 397f25c
1 parent b10d218
commit 397f25c
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 54 deletions.
diff --git a/site/app/editor-example.tsx b/site/app/editor-example.tsx
@@ -2,7 +2,6 @@ import { LiveEditor } from './live-editor'
 
 const defaultCode = `\
 import { useState } from 'react'
-import { highlight } from 'sugar-high'
 import { Editor } from 'codice'
 
 const defaultText = 'console.log("hello world")'

diff --git a/site/app/live-editor.tsx b/site/app/live-editor.tsx
@@ -156,58 +156,60 @@ export function LiveEditor({
   return (
     <div>
       {/* Controls to for displaying the `title`, `controls`, `lineNumbers` */}
-      <div className="controls-manager">
-        <ControlButton
-          id="control-title"
-          checked={!!title}
-          propName="title"
-          content={
-            <Input
-              value={title}
-              onChange={v => { setTitle(v) }}
-            />
-          }
+      <div className='controls'>
+        <div className="controls-manager">
+          <ControlButton
+            id="control-title"
+            checked={!!title}
+            propName="title"
+            content={
+              <Input
+                value={title}
+                onChange={v => { setTitle(v) }}
+              />
+            }
+          />
+          <ControlButton
+            id="control-control"
+            checked={controls}
+            onChange={setControls}
+            propName="controls"
+          />
+          <ControlButton
+            id="control-line-numbers"
+            checked={lineNumbers}
+            onChange={setLineNumbers}
+            propName="lineNumbers"
+          />
+        </div>
+        <RangeSelector 
+          text="fontSize"
+          className="range-control"
+          min={12}
+          max={24}
+          step={2}
+          value={fontSize}
+          onChange={setFontSize}
         />
-        <ControlButton
-          id="control-control"
-          checked={controls}
-          onChange={setControls}
-          propName="controls"
+        <RangeSelector 
+          text="padding"
+          className="range-control" 
+          min={1}
+          max={2}
+          step={0.1}
+          value={padding} 
+          onChange={setPadding}
         />
-        <ControlButton
-          id="control-line-numbers"
-          checked={lineNumbers}
-          onChange={setLineNumbers}
-          propName="lineNumbers"
+        <RangeSelector 
+          text="lineNumbersWidth"
+          className="range-control" 
+          value={lineNumbersWidth}
+          min={1}
+          max={2}
+          step={0.2}
+          onChange={setLineNumbersWidth}
         />
       </div>
-      <RangeSelector 
-        text="fontSize"
-        className="range-control"
-        min={12}
-        max={24}
-        step={2}
-        value={fontSize}
-        onChange={setFontSize}
-      />
-      <RangeSelector 
-        text="padding"
-        className="range-control" 
-        min={1}
-        max={2}
-        step={0.1}
-        value={padding} 
-        onChange={setPadding}
-      />
-      <RangeSelector 
-        text="lineNumbersWidth"
-        className="range-control" 
-        value={lineNumbersWidth}
-        min={1}
-        max={2}
-        step={0.2}
-        onChange={setLineNumbersWidth}
-      />
 
       <div className='editor-layout'>
         <span

diff --git a/site/app/styles.css b/site/app/styles.css
@@ -108,6 +108,9 @@ input[type=radio] {
   margin: 2rem 0;
   border: 1px solid rgba(163, 169, 165, 0.2);
 }
+.code-example__item code {
+  font-size: 14px;
+}
 .code-example__item__title {
   margin: 0 0 2rem;
 }
@@ -170,6 +173,9 @@ input[type=radio] {
   cursor: pointer;
   transform: translateY(-0.25rem);
 }
+.controls {
+  margin: 2rem 0 4rem;
+}
 .controls-manager {
   display: flex;
   font-size: 14px;
@@ -192,7 +198,7 @@ input[type=radio] {
 }
 .editor-layout .copy-image {
   position: absolute;
-  top: 14px;
+  top: 12px;
   right: 16px;
   cursor: pointer;
   transition: transform 0.2s ease-in-out;

diff --git a/src/code/css.ts b/src/code/css.ts
@@ -71,7 +71,6 @@ const lineNumbersCss = (id: string) => `\
   content: counter(codice-code-line-number);
   display: inline-block;
   min-width: calc(2rem - 6px);
-  width: var(--codice-code-line-number-width);
   margin-left: calc(var(--codice-code-line-number-width) * -1);
   margin-right: 16px;
   text-align: right;

diff --git a/src/editor/editor.test.tsx b/src/editor/editor.test.tsx
@@ -167,7 +167,6 @@ describe('Code', () => {
         content: counter(codice-code-line-number);
         display: inline-block;
         min-width: calc(2rem - 6px);
-        width: var(--codice-code-line-number-width);
         margin-left: calc(var(--codice-code-line-number-width) * -1);
         margin-right: 16px;
         text-align: right;
@@ -343,7 +342,6 @@ describe('Code', () => {
         content: counter(codice-code-line-number);
         display: inline-block;
         min-width: calc(2rem - 6px);
-        width: var(--codice-code-line-number-width);
         margin-left: calc(var(--codice-code-line-number-width) * -1);
         margin-right: 16px;
         text-align: right;
@@ -486,7 +484,6 @@ describe('Code', () => {
         content: counter(codice-code-line-number);
         display: inline-block;
         min-width: calc(2rem - 6px);
-        width: var(--codice-code-line-number-width);
         margin-left: calc(var(--codice-code-line-number-width) * -1);
         margin-right: 16px;
         text-align: right;