Fix Layout

This commit is contained in:
ChatGPT
2026-06-04 22:52:08 +02:00
parent db75a89401
commit 4a03a992d0
5 changed files with 228 additions and 76 deletions
+43 -24
View File
@@ -15,7 +15,7 @@
.configurable-reactions .cr-grid {
display: grid;
grid-template-columns: 310px 1fr;
grid-template-columns: 33% 67%;
gap: 1rem;
min-height: 0;
height: 100%;
@@ -27,6 +27,12 @@
overflow: auto;
}
.configurable-reactions .cr-main {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.configurable-reactions .cr-button-column {
display: flex;
flex-direction: column;
@@ -86,7 +92,9 @@
display: grid;
grid-template-columns: 1fr 1.35fr;
gap: 0.75rem;
margin-bottom: 0.75rem;
flex: 0 0 40%;
min-height: 220px;
overflow: auto;
}
.configurable-reactions .cr-card,
@@ -100,7 +108,7 @@
.configurable-reactions .cr-basics {
display: grid;
grid-template-columns: 1fr auto auto;
grid-template-columns: 1fr auto;
align-items: end;
gap: 0.75rem;
margin-bottom: 0.75rem;
@@ -157,15 +165,17 @@
opacity: 0.8;
}
.configurable-reactions .cr-main textarea[name="reactionJson"] {
width: 100%;
min-height: 340px;
font-family: var(--font-monospace, monospace);
resize: vertical;
.configurable-reactions .cr-json-editor {
flex: 1 1 auto;
min-height: 0;
}
.configurable-reactions .cr-reaction-summary {
margin-bottom: 0.75rem;
.configurable-reactions .cr-main textarea[name="reactionJson"] {
width: 100%;
height: 100%;
min-height: 180px;
font-family: var(--font-monospace, monospace);
resize: none;
}
.configurable-reactions .form-group.stacked {
@@ -198,21 +208,23 @@
justify-content: end;
}
.configurable-reactions .cr-status-builder {
.configurable-reactions .cr-status-builder,
.configurable-reactions .cr-damage-builder {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin-top: 0.5rem;
}
.configurable-reactions .cr-status-label {
.configurable-reactions .cr-chip-label {
opacity: 0.85;
font-weight: 600;
}
.configurable-reactions .cr-status-chip-list {
.configurable-reactions .cr-chip-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.25rem;
min-height: 1.6rem;
padding: 0.25rem;
@@ -221,38 +233,45 @@
background: rgb(0 0 0 / 0.08);
}
.configurable-reactions .cr-status-chip {
.configurable-reactions .cr-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
max-width: 100%;
padding: 0.15rem 0.25rem 0.15rem 0.35rem;
padding: 0.12rem 0.2rem 0.12rem 0.35rem;
border: 1px solid var(--color-border-light-secondary, #777);
border-radius: 999px;
background: rgb(0 0 0 / 0.16);
font-size: 0.8rem;
font-size: 70%;
}
.configurable-reactions .cr-status-chip img {
width: 16px;
height: 16px;
.configurable-reactions .cr-chip img {
width: 14px;
height: 14px;
border: none;
object-fit: contain;
}
.configurable-reactions .cr-status-chip span {
.configurable-reactions .cr-chip span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.configurable-reactions .cr-status-chip button {
width: 1.35rem;
min-height: 1.35rem;
.configurable-reactions .cr-chip button {
width: 1rem;
min-height: 1rem;
height: 1rem;
padding: 0;
line-height: 1;
border: none;
box-shadow: none;
background: transparent;
font-size: 0.85em;
}
.configurable-reactions .cr-status-builder select {
.configurable-reactions .cr-status-builder select,
.configurable-reactions .cr-damage-builder select {
width: 100%;
}