diff --git a/src/layout/melissa/MelissaConfiguracoes.vue b/src/layout/melissa/MelissaConfiguracoes.vue
index 6372fcc..a2ab251 100644
--- a/src/layout/melissa/MelissaConfiguracoes.vue
+++ b/src/layout/melissa/MelissaConfiguracoes.vue
@@ -350,7 +350,10 @@ function resetCores() {
-
{{ g.label }}
+
+ {{ g.label }}
+ {{ g.desc }}
+
{{ g.items.length }}
@@ -362,11 +365,13 @@ function resetCores() {
type="button"
class="mcfg-nav-item"
:class="{ 'is-active': secaoAtiva === s.key }"
- :title="s.desc"
@click="selecionar(s)"
>
- {{ s.label }}
+
+ {{ s.label }}
+ {{ s.desc }}
+
@@ -736,7 +741,7 @@ function resetCores() {
padding: 2px 0 6px;
}
-/* Header de grupo — icone inline + label + badge */
+/* Header de grupo — icone inline + (label + desc) + badge */
.mcfg-grp-head {
display: flex;
align-items: center;
@@ -745,19 +750,33 @@ function resetCores() {
min-width: 0;
}
.mcfg-grp-icon {
- width: 16px;
+ width: 18px;
text-align: center;
color: var(--p-primary-color);
- font-size: 0.92rem;
+ font-size: 0.95rem;
flex-shrink: 0;
}
-.mcfg-grp-label {
+.mcfg-grp-text {
flex: 1;
min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 1px;
+ text-align: left;
+}
+.mcfg-grp-label {
font-size: 0.86rem;
font-weight: 600;
color: var(--m-text);
- text-align: left;
+ line-height: 1.25;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.mcfg-grp-desc {
+ font-size: 0.7rem;
+ color: var(--m-text-muted);
+ line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -778,28 +797,28 @@ function resetCores() {
border-radius: 999px;
}
-/* Sub-itens — botao linha unica, denso */
+/* Sub-itens — botao com titulo + subtitulo */
.mcfg-nav-list {
display: flex;
flex-direction: column;
- gap: 1px;
- padding-left: 22px;
+ gap: 2px;
+ padding-left: 24px;
padding-right: 4px;
}
.mcfg-nav-item {
display: flex;
align-items: center;
gap: 10px;
- padding: 7px 10px;
+ padding: 8px 10px;
background: transparent;
border: none;
- border-radius: 7px;
+ border-radius: 8px;
color: var(--m-text);
cursor: pointer;
text-align: left;
font-family: inherit;
- font-size: 0.84rem;
width: 100%;
+ min-height: 44px;
}
.mcfg-nav-item:hover {
background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
@@ -815,17 +834,36 @@ function resetCores() {
width: 16px;
text-align: center;
color: var(--m-text-muted);
- font-size: 0.82rem;
+ font-size: 0.85rem;
flex-shrink: 0;
}
-.mcfg-nav-item__label {
+.mcfg-nav-item__text {
flex: 1;
min-width: 0;
- font-weight: 500;
+ display: flex;
+ flex-direction: column;
+ gap: 1px;
+}
+.mcfg-nav-item__label {
+ font-size: 0.84rem;
+ font-weight: 600;
+ line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
+.mcfg-nav-item__desc {
+ font-size: 0.7rem;
+ color: var(--m-text-muted);
+ line-height: 1.3;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.mcfg-nav-item:hover .mcfg-nav-item__desc,
+.mcfg-nav-item.is-active .mcfg-nav-item__desc {
+ color: color-mix(in srgb, var(--p-primary-color) 70%, var(--m-text-muted));
+}
/* ═════ COL 2: Main ═════ */
.mcfg-main {