Skip to content

Commit 5ce1fab

Browse files
code-by-siacode-by-sia
committed
fix: correct cell selection overlay sizing and refine color picker
Two UI regressions from the Vue->React migration: - The cell selection overlay (green border box, editor input, and fill-handle square) is positioned with content-box math, but Tailwind's preflight applies `box-sizing: border-box` globally. The borders ate into the declared width/height, so the green box rendered too small and no longer wrapped the selected cell. Explicitly set `box-sizing: content-box` on the editor overlay elements to restore the original sizing. - The native color inputs (Text, Fill, Border color) rendered as bulky black boxes. Style them as compact rounded swatches with a subtle border and hover accent, matching the original look. Rebuilds the GitHub Pages bundle so the fixes ship to the live site.
1 parent 4bab8f2 commit 5ce1fab

5 files changed

Lines changed: 38 additions & 4 deletions

File tree

docs/assets/index-C8Mjwljw.css renamed to docs/assets/index-BHpHweNg.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/assets/index-BmubRFE9.js renamed to docs/assets/index-DBBtQYny.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
<link rel="manifest" href="/OpenWebSheet/manifest.json">
1616
<meta name="theme-color" content="#00454d">
1717
<title>Open web sheet</title>
18-
<script type="module" crossorigin src="/OpenWebSheet/assets/index-BmubRFE9.js"></script>
19-
<link rel="stylesheet" crossorigin href="/OpenWebSheet/assets/index-C8Mjwljw.css">
18+
<script type="module" crossorigin src="/OpenWebSheet/assets/index-DBBtQYny.js"></script>
19+
<link rel="stylesheet" crossorigin href="/OpenWebSheet/assets/index-BHpHweNg.css">
2020
</head>
2121
<body>
2222
<noscript>

‎src/app/styles.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,31 @@
114114
@apply h-7 border border-gray-300 rounded-sm bg-white text-gray-900;
115115
}
116116

117+
/* Compact color swatch instead of the bulky native color input. */
118+
.ows-field input[type='color'] {
119+
@apply h-6 w-8 p-0 rounded cursor-pointer shadow-sm;
120+
border: 1px solid #c4c4c4;
121+
background: transparent;
122+
}
123+
124+
.ows-field input[type='color']:hover {
125+
border-color: #00454d;
126+
}
127+
128+
.ows-field input[type='color']::-webkit-color-swatch-wrapper {
129+
padding: 2px;
130+
}
131+
132+
.ows-field input[type='color']::-webkit-color-swatch {
133+
@apply rounded-sm;
134+
border: none;
135+
}
136+
137+
.ows-field input[type='color']::-moz-color-swatch {
138+
@apply rounded-sm;
139+
border: none;
140+
}
141+
117142
.ows-formula-bar {
118143
@apply flex items-center border-b border-t border-gray-300 bg-white;
119144
}

‎src/lib/editor/CellEditor.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,12 @@ export class CellEditor {
6161

6262
public initialize() {
6363
this.editorArea = document.createElement('div');
64+
// The overlay math below assumes content-box sizing (the 2px selection border and
65+
// the editor input border sit *outside* the declared width/height). A global
66+
// `box-sizing: border-box` reset (such as Tailwind's preflight) would otherwise
67+
// shrink the green selection box and the editor, so each element opts back into
68+
// content-box explicitly.
69+
this.editorArea.style.boxSizing = 'content-box';
6470
this.editorArea.style.position = 'absolute';
6571
this.editorArea.style.top = ColumnHeaderHeight + 'px';
6672
this.editorArea.style.left = RowHeaderWidth + 'px';
@@ -70,6 +76,7 @@ export class CellEditor {
7076
this.controler.renderer.Element.appendChild(this.editorArea);
7177

7278
this.selectionElement = document.createElement('div');
79+
this.selectionElement.style.boxSizing = 'content-box';
7380
this.selectionElement.style.position = 'absolute';
7481
this.selectionElement.style.border = `solid 2px ${COLOR_1}`;
7582
this.selectionElement.style.overflow = 'hidden';
@@ -79,6 +86,7 @@ export class CellEditor {
7986

8087
this.editorElement = document.createElement('input');
8188
this.editorElement.type = 'text';
89+
this.editorElement.style.boxSizing = 'content-box';
8290
this.editorElement.style.display = 'block';
8391
this.editorElement.style.zIndex = '10000';
8492
this.editorElement.style.position = 'absolute';
@@ -99,6 +107,7 @@ export class CellEditor {
99107
this.selectionElement.appendChild(this.editorElement);
100108

101109
this.anchorElement = document.createElement('span');
110+
this.anchorElement.style.boxSizing = 'content-box';
102111
this.anchorElement.style.position = 'absolute';
103112
this.anchorElement.style.right = '0';
104113
this.anchorElement.style.bottom = '0';

0 commit comments

Comments
 (0)