fix: tighten calc stack display layout
Reorder the stack cell grid so the copy button sits beside the label and reduce spacing to better align the value column.
This commit is contained in:
1 parent
6c8c032f7a
commit
2504716c64
2 files changed
+7
-7
No files matched your search
@@ -130,9 +130,9 @@ body {
|
||||
|
||||
.stack-cell {
|
||||
display: grid;
|
||||
grid-template-columns: 2.2ch minmax(0, 1fr) auto;
|
||||
grid-template-columns: 2.2ch auto minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
min-height: 0;
|
||||
@@ -337,7 +337,7 @@ button:active {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: rgba(31, 42, 18, 0.58);
|
||||
margin-left: 6px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.stack-cell:last-child {
|
||||
|
||||
@@ -14,10 +14,10 @@
|
||||
<div class="status-bar" id="statusLine" aria-live="polite"></div>
|
||||
<div class="display-frame">
|
||||
<div class="display-grid">
|
||||
<div class="stack-cell"><span class="stack-label">T:</span><span id="stackT" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="T" aria-label="Copy T value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
|
||||
<div class="stack-cell"><span class="stack-label">Z:</span><span id="stackZ" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="Z" aria-label="Copy Z value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
|
||||
<div class="stack-cell"><span class="stack-label">Y:</span><span id="stackY" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="Y" aria-label="Copy Y value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
|
||||
<div class="stack-cell"><span class="stack-label">X:</span><span id="stackX" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="X" aria-label="Copy X value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
|
||||
<div class="stack-cell"><span class="stack-label">T:</span><button type="button" class="stack-copy-button" data-copy-stack="T" aria-label="Copy T value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button><span id="stackT" class="stack-value"></span></div>
|
||||
<div class="stack-cell"><span class="stack-label">Z:</span><button type="button" class="stack-copy-button" data-copy-stack="Z" aria-label="Copy Z value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button><span id="stackZ" class="stack-value"></span></div>
|
||||
<div class="stack-cell"><span class="stack-label">Y:</span><button type="button" class="stack-copy-button" data-copy-stack="Y" aria-label="Copy Y value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button><span id="stackY" class="stack-value"></span></div>
|
||||
<div class="stack-cell"><span class="stack-label">X:</span><button type="button" class="stack-copy-button" data-copy-stack="X" aria-label="Copy X value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button><span id="stackX" class="stack-value"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user