feat: switch criteria items to horizontal flex-row layout

Transform .competence-item layout from vertical flex-column to horizontal flex-row with checkbox, label (flex-grow), level pills, and remove button. Remove 'Niveau:' label text and reposition remove-field-btn from absolute to static positioning.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
sebvtl728
2026-06-21 16:58:04 +02:00
parent 10f969c642
commit 44c471e849
2 changed files with 18 additions and 19 deletions
+18 -18
View File
@@ -607,16 +607,17 @@
.competence-item { .competence-item {
border: 1px solid var(--border-slate-200); border: 1px solid var(--border-slate-200);
padding: 16px; padding: 10px 12px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
cursor: grab; cursor: grab;
position: relative;
background: #ffffff; background: #ffffff;
transition: var(--transition); transition: var(--transition);
display: flex; display: flex;
flex-direction: column; flex-direction: row;
gap: 12px; align-items: center;
gap: 10px;
box-shadow: var(--shadow-card); box-shadow: var(--shadow-card);
position: relative;
} }
.competence-item:hover { .competence-item:hover {
@@ -636,15 +637,14 @@
} }
.competence-item .competence-label { .competence-item .competence-label {
font-weight: 700; flex: 1;
min-width: 0;
font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
font-size: 13.5px; font-size: 13px;
padding-right: 22px;
cursor: pointer; cursor: pointer;
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.4; line-height: 1.4;
padding-right: 0;
} }
.remove-field-btn { .remove-field-btn {
@@ -660,13 +660,12 @@
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
justify-content: center !important; justify-content: center !important;
position: absolute; flex-shrink: 0;
top: 14px;
right: 14px;
opacity: 0; opacity: 0;
transform: scale(0.8); transform: scale(0.8);
transition: var(--transition); transition: var(--transition);
box-shadow: none !important; box-shadow: none !important;
position: static;
} }
.competence-item:hover .remove-field-btn { .competence-item:hover .remove-field-btn {
@@ -765,13 +764,14 @@
} }
.level-group { .level-group {
margin-top: 12px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: nowrap;
gap: 6px; gap: 4px;
align-items: center; align-items: center;
border-top: 1px dashed var(--border-slate-200); flex-shrink: 0;
padding-top: 12px; border-top: none;
padding-top: 0;
margin-top: 0;
} }
.level-title { .level-title {
-1
View File
@@ -1062,7 +1062,6 @@ ${notesFormateur}`,
role="radiogroup" role="radiogroup"
aria-label="Niveau" aria-label="Niveau"
> >
<span className="level-title">Niveau :</span>
{LEVELS.map((level) => ( {LEVELS.map((level) => (
<span className="level-pill" key={level.key}> <span className="level-pill" key={level.key}>
<input <input