Skip to content

feat(MasterMix): add style props to compact the card - #336

Merged
simbig merged 6 commits into
masterfrom
AE-6453-improved-qpcr-layout-for-small-screens
Oct 13, 2026
Merged

simbig merged 6 commits into
masterfrom
AE-6453-improved-qpcr-layout-for-small-screens

Conversation

@simbig

@simbig simbig commented Oct 12, 2026 •

Copy link
Copy Markdown
Contributor

Part of https://mlllab.atlassian.net/browse/AE-6453

Auf dem Tablet passen im qPCR nur zwei MasterMix-Cards nebeneinander.
Drei opt-in Props machen die Card kompakter, ohne die Schrift zu verkleinern.
Für alle Ansichten bricht ein Volumen nicht mehr zwischen Zahl und µl um, und die Tabelle darf bis 480px statt 400px breit werden.

Die Props ändern ohne Angabe nichts, die zwei Defaults betreffen auch Assayverwaltung, MeltingCurve und SalsaMlpa
  • Ein geschütztes Leerzeichen hält Zahl und Einheit zusammen, heute bricht etwa 18.0 / µl.
  • Mit 480px bleiben lange Namen wie Forward Primer PML-RARA_bcr1-F neu und der Spaltenkopf 9x Ansätze + 2x (PV) einzeilig. In einer Card breiter als 480px wird die Tabelle damit auch ohne langen Inhalt 480px breit.
Was die drei Props ändern
  • bodyPadding setzt das Padding des Card-Body.
  • headerSpacing setzt das vertikale Padding der Titelzeile, eine Zahl gilt als px. Dazu fallen min-height des Card-Kopfs und margin-bottom des Titels weg, sonst bleibt der Platz trotzdem stehen.
  • indentStepInPixels ersetzt den festen Einzug von 20px pro Ebene.

Die Story NarrowCard zeigt alle drei in einem 400px breiten Container.

20.9.0-alpha.3 ist schon veröffentlicht, limes-frontend testet damit

Der Branch ist in alpha gemergt, limes-frontend stimmt mit der Alpha die Werte bei 1280px ab.
Der Merge auf master löst den Stable-Release aus, deshalb bleibt der PR Draft, bis das Tablet-Layout abgenommen ist.

Bewusst weggelassen: fester Umbruch in „Ansätze + PV“

Ein Prop dafür kommt nur, falls der automatische Umbruch auf dem Tablet unschön aussieht.

🤖 Generated with Claude Code

simbig added 6 commits October 9, 2026 16:57
…s to compact the card

Leaving them out keeps the current look.

🤖 Generated with Claude Code
… as paddingBlock

🤖 Generated with Claude Code
…eader stay on one line

🤖 Generated with Claude Code
@github-actions

Copy link
Copy Markdown

🎉 This PR is included in version 20.9.0-alpha.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

@simbig

simbig commented Oct 12, 2026

Copy link
Copy Markdown
Contributor Author

🤖 Self-Review von dc4b288e4d..58e49bd092: drei Findings, alle in ba14cc1 behoben.

  • Bug, src/MasterMix/types.ts:37 / src/MasterMix/index.tsx:42: headerSpacing als Zahl bekam keine px-Einheit und war als padding typisiert, obwohl es als padding-block verwendet wird
  • MUST, src/MasterMix/volumeColumns.tsx:30: indentStepInPixels als number statt MasterMixStyle['indentStepInPixels'] typisiert
  • MUST, src/MasterMix/MasterMixRowName.tsx:30: dasselbe für indentStepInPixels

@simbig
simbig requested a review from mic-web October 12, 2026 13:52
@simbig
simbig marked this pull request as ready for review October 13, 2026 12:20
@simbig
simbig merged commit 9d2f3f3 into master Oct 13, 2026
8 checks passed
@simbig
simbig deleted the AE-6453-improved-qpcr-layout-for-small-screens branch October 13, 2026 12:21
github-actions Bot pushed a commit that referenced this pull request Oct 13, 2026
# [20.9.0](v20.8.0...v20.9.0) (2026-10-13)

### Features

* **MasterMix:** add style props to compact the card ([#336](#336)) ([9d2f3f3](9d2f3f3))
@github-actions

Copy link
Copy Markdown

🎉 This PR is included in version 20.9.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

2 participants