gitadmin/INSIGHT-MVP
1
0
Fork 0
mirror of http://172.20.10.11:3000/gitadmin/INSIGHT-MVP.git synced 2026-06-25 00:16:41 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(frontend): Section-Header Titel über Eingabefelder + kompaktere Darstellung

Browse source 
- sectionHeader auf flex-column umgestellt: Titel immer oberhalb der
  Eingabe-Felder statt nebeneinander (Skills / Sprachen / Erfahrung)
- Section-Padding reduziert (1.5rem → 1rem/1.125rem) für kompaktere 3-Spalten
- chipInput und headerForm: flex: 1 + min-width: 0 für sauberes Stretching
- Max-Width-Beschränkungen entfernt damit Inputs die volle Spaltenbreite nutzen

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Thomas Reitz 2026-03-14 11:16:53 +01:00
parent 9d7dcaaaea
commit d08bedecf7
1 changed files with 16 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
packages/frontend/src/profile/ExpertProfileTab.module.css
View file

@ -49,44 +49,42 @@
.section { .section {
background: var(--color-bg-card); background: var(--color-bg-card);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: 1.5rem; padding: 1rem 1.125rem;
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
} }
.sectionHeader { .sectionHeader {
display: flex; display: flex;
align-items: center; flex-direction: column;
justify-content: space-between; gap: 0.5rem;
margin-bottom: 1rem; margin-bottom: 0.875rem;
padding-bottom: 0.75rem; padding-bottom: 0.625rem;
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
} }
.sectionTitle { .sectionTitle {
font-size: 1rem; font-size: 0.9375rem;
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
white-space: nowrap;
} }
/* === Header Form (inline neben Titel) === */ /* === Header Form (unterhalb des Titels) === */
.headerForm { .headerForm {
display: flex; display: flex;
gap: 0.375rem; gap: 0.375rem;
align-items: center; align-items: center;
flex-wrap: wrap;
} }
.headerForm input, .headerForm input,
.headerForm select { .headerForm select {
padding: 0.375rem 0.5rem; padding: 0.3125rem 0.5rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
font-size: 0.8125rem; font-size: 0.8125rem;
} min-width: 0;
flex: 1;
.headerForm input {
max-width: 160px;
} }
.headerForm input:focus, .headerForm input:focus,
@ -96,25 +94,6 @@
box-shadow: 0 0 0 2px var(--color-primary-light); box-shadow: 0 0 0 2px var(--color-primary-light);
} }
@media (max-width: 640px) {
.sectionHeader {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.headerForm {
flex-wrap: wrap;
width: 100%;
}
.headerForm input {
max-width: none;
flex: 1;
min-width: 120px;
}
}
/* === Chips/Tags === */ /* === Chips/Tags === */
.chipContainer { .chipContainer {
display: flex; display: flex;
@ -159,23 +138,23 @@
.chipInput { .chipInput {
display: flex; display: flex;
gap: 0.5rem; gap: 0.375rem;
align-items: center; align-items: center;
} }
.chipInput input { .chipInput input {
padding: 0.5rem 0.75rem; padding: 0.3125rem 0.5rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
font-size: 0.875rem; font-size: 0.8125rem;
flex: 1; flex: 1;
max-width: 250px; min-width: 0;
} }
.chipInput input:focus { .chipInput input:focus {
outline: none; outline: none;
border-color: var(--color-primary); border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-light); box-shadow: 0 0 0 2px var(--color-primary-light);
} }
/* === Entry List === */ /* === Entry List === */