extension friendly bottom and quick actions CSS
Alessandro committed
Mar 10, 2026 at 15:26 UTC
e03569ef7d187d1da7e8d55062c7947004991665
3 files changed
+27
-27
webui/components/chat/input/bottom-actions.html
+7
-4
@@ -80,8 +80,11 @@
80
</div>
81
82
<style>
83
- .text-buttons-row { width: 100%; display: flex; padding-top: var(--spacing-xs); margin-left: var(--spacing-xs); }
84
- .text-buttons-row > x-extension { display: contents; }
83
+ .text-buttons-row { width: 100%; display: flex; flex-wrap: wrap; gap: var(--spacing-xs); padding-top: var(--spacing-xs); margin-left: var(--spacing-xs); }
84
+ .text-buttons-row > x-extension:not(:empty) { display: contents; }
85
+ .text-buttons-row > x-extension:empty { display: none; }
86
+ .text-buttons-row > x-extension > x-component,
87
+ .text-buttons-row > x-extension > x-component > div[x-data] { display: contents; }
88
.text-button { background-color: transparent; border: none; border-radius: 5px; color: var(--color-text); font-family: "Rubik", Arial, Helvetica, sans-serif; font-size: 0.6rem; padding: 6px var(--spacing-sm); cursor: pointer; opacity: 0.8; -webkit-transition: all 0.3s; transition: all 0.3s; display: flex; align-items: center; gap: var(--spacing-xs); }
89
.text-button:hover:not(:disabled) { opacity: 1; background-color: var(--color-background-hover); border-radius: 4px; }
90
.text-button:active:not(:disabled) { opacity: 0.5; }
@@ -90,8 +93,8 @@
93
.text-button .material-symbols-outlined { font-size: 14px; flex-shrink: 0; }
94
.text-button p { margin-block: 0; }
95
93
- @media (max-width: 768px) { .text-buttons-row { width: 90%; display: flex; padding-top: var(--spacing-xs); gap: var(--spacing-xs); white-space: pre-wrap; } .text-button { font-size: 0.6rem; } .text-button svg { width: 18px; height: 18px; flex-shrink: 0; } .text-button .material-symbols-outlined { font-size: 18px; } }
94
- @media (max-width: 640px) { .text-buttons-row { display: flex; width: 90%; padding-top: var(--spacing-xs); gap: var(--spacing-xs); white-space: pre-wrap; } .text-button { max-height: 25px; } .text-button p { display: none; } }
96
+ @media (max-width: 768px) { .text-buttons-row { width: 90%; display: flex; flex-wrap: wrap; padding-top: var(--spacing-xs); gap: var(--spacing-xs); white-space: pre-wrap; } .text-button { font-size: 0.6rem; } .text-button svg { width: 18px; height: 18px; flex-shrink: 0; } .text-button .material-symbols-outlined { font-size: 18px; } }
97
+ @media (max-width: 640px) { .text-buttons-row { display: flex; flex-wrap: wrap; width: 90%; padding-top: var(--spacing-xs); gap: var(--spacing-xs); white-space: pre-wrap; } .text-button { max-height: 25px; } .text-button p { display: none; } }
98
</style>
99
</body>
100
</html>
webui/components/chat/input/progress.html
+1
-1
@@ -37,7 +37,7 @@
37
38
39
<style>
40
- #progress-bar-box { background-color: var(--color-panel); padding: var(--spacing-sm) var(--spacing-md); padding-bottom: 0; display: flex; justify-content: space-between; z-index: 1001; gap: var(--spacing-sm); }
40
+ #progress-bar-box { background-color: var(--color-panel); padding: var(--spacing-sm) var(--spacing-md); padding-bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; z-index: 1001; gap: var(--spacing-sm); }
41
#progress-bar-box > x-extension { display: contents; }
42
#progress-bar-box h4 { margin: 0 1.2em 0 0; }
43
#progress-bar-h { color: var(--color-primary); display: flex; align-items: left; justify-content: flex-start; height: 1.2em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-weight: normal; }
webui/components/sidebar/top-section/quick-actions.html
+19
-22
@@ -116,22 +116,34 @@
116
/* Ensure dropdown appears above all sidebar content */
117
}
118
119
- /* Icon toolbar layout */
119
+ /* Icon toolbar layout – grid for extension-friendly wrapping */
120
#quick-actions {
121
- display: flex;
122
- flex-direction: row;
123
- flex-wrap: nowrap;
121
+ display: grid;
122
+ grid-template-columns: repeat(5, 1fr);
123
+ grid-auto-rows: auto;
124
width: 100%;
125
- justify-content: space-between;
125
padding: 0;
127
- gap: 0;
126
+ gap: var(--spacing-xs);
127
+ }
128
+
129
+ #quick-actions > x-extension:not(:empty) {
130
+ display: contents;
131
+ }
132
+
133
+ #quick-actions > x-extension:empty {
134
+ display: none;
135
+ }
136
+
137
+ #quick-actions > x-extension > x-component,
138
+ #quick-actions > x-extension > x-component > div[x-data] {
139
+ display: contents;
140
}
141
142
/* Config button - icon only style */
143
.config-button {
144
background-color: var(--color-panel);
145
border: 0.05rem solid var(--color-border);
134
- border-radius: 0;
146
+ border-radius: 4px;
147
cursor: pointer;
148
display: flex;
149
align-items: center;
@@ -154,21 +166,6 @@
166
transform: rotate(180deg);
167
}
168
157
- /* Connected button borders */
158
- .config-button:not(:last-child) {
159
- margin-right: -1px;
160
- border-right: 1px solid var(--color-border);
161
- }
162
-
163
- .config-button:first-of-type {
164
- border-top-left-radius: 6px !important;
165
- border-bottom-left-radius: 6px !important;
166
- }
167
-
168
- .config-button:last-child {
169
- border-top-right-radius: 6px !important;
170
- border-bottom-right-radius: 6px !important;
171
- }
169
170
.config-button:hover {
171
background-color: var(--color-background-hover);