Bug/schlechter oder kein umbruch bei vergoesserung

packages/components/src/components/table/style.css

@@ -43,12 +43,23 @@
 		order: 2;
 	}
 
+	div.pagination kol-pagination {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
 	div.pagination,
 	div.pagination > div:last-child {
 		display: grid;
 		place-items: center;
 	}
 
+	@media (max-width: 1024px) {
+		div.pagination kol-pagination {
+			flex-direction: column;
+		}
+	}
+
 	@media (min-width: 1024px) {
 		div.pagination,
 		div.pagination > div:last-child {

packages/samples/react/src/components/button/access-key.tsx

@@ -2,7 +2,7 @@ import { KolButton } from '@public-ui/react';
 import React, { FC } from 'react';
 
 export const ButtonAccessKey: FC = () => (
-	<div className="flex gap-4">
+	<div className="flex flex-wrap gap-4">
 		<KolButton _label="Mit S access key" _accessKey="S"></KolButton>
 		<KolButton _label="Sehr kleines s" _accessKey="s"></KolButton>
 		<KolButton _label="Access key kommt nicht in label vor" _accessKey="x"></KolButton>

packages/samples/react/src/components/button/width.tsx

@@ -12,14 +12,14 @@ const ARGS = {
 
 export const ButtonWidth: FC = () => (
 	<div className="grid gap-14">
-		<div className="flex flex-warp gap-14">
+		<div className="flex flex-wrap gap-14">
 			<KolButton _label="Primary" _variant="primary" {...ARGS}></KolButton>
 			<KolButton _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
 			<KolButton _label="Normal" _variant="normal" {...ARGS}></KolButton>
 			<KolButton _label="Danger" _variant="danger" {...ARGS}></KolButton>
 			<KolButton _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
 		</div>
-		<div className="flex flex-warp gap-14">
+		<div className="flex flex-wrap gap-14">
 			<KolButton _disabled _label="Primary" _variant="primary" {...ARGS}></KolButton>
 			<KolButton _disabled _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
 			<KolButton _disabled _label="Normal" _variant="normal" {...ARGS}></KolButton>

packages/samples/react/src/components/card/selection.tsx

@@ -11,8 +11,8 @@ const STYLE = {
 };
 
 export const CardSelection: FC = () => (
-	<div className="flex gap-2">
-		<KolCard _label="DEBTI-25437/17-1">
+	<div className="flex flex-wrap gap-2">
+		<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
 			<div>
 				<div>
 					TeCorp Endplatte
@@ -32,7 +32,7 @@ export const CardSelection: FC = () => (
 				</div>
 			</div>
 		</KolCard>
-		<KolCard _label="DEBTI-25437/17-1">
+		<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
 			<div>
 				<div>
 					TeCorp Endplatte
@@ -52,7 +52,7 @@ export const CardSelection: FC = () => (
 				</div>
 			</div>
 		</KolCard>
-		<KolCard _label="DEBTI-25437/17-1">
+		<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
 			<div>
 				<div>
 					TeCorp Endplatte

packages/samples/react/src/components/link-button/basic.tsx

@@ -11,7 +11,7 @@ const ARGS = {
 
 export const LinkButtonBasic: FC = () => (
 	<div className="grid gap-14">
-		<div className="flex flex-warp gap-14">
+		<div className="flex flex-wrap gap-14">
 			<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>
 			<KolLinkButton _label="Secondary" _variant="secondary" {...ARGS}></KolLinkButton>
 			<KolLinkButton _label="Normal" _variant="normal" {...ARGS}></KolLinkButton>

packages/samples/react/src/components/table/badge-size.tsx

@@ -15,11 +15,12 @@ const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: 'order', key: 'order', textAlign: 'center' },
+			{ label: 'order', key: 'order', textAlign: 'center', width: '10em' },
 			{
 				label: 'date',
 				key: 'date',
 				textAlign: 'center',
+				width: '20em',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
 				sort: (data: Data[]) =>
 					data.sort((data0, data1) => {
@@ -48,4 +49,4 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableBadgeSize: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;
+export const TableBadgeSize: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />;

packages/samples/react/src/components/table/render-cell.tsx

@@ -11,10 +11,11 @@ import { SampleDescription } from '../SampleDescription';
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: '#', key: 'order', textAlign: 'center' },
+			{ label: '#', key: 'order', textAlign: 'center', width: '10em' },
 			{
 				label: 'Datum (string)',
 				key: 'date',
+				width: '20em',
 				textAlign: 'center',
 				render: (el, tupel) => {
 					// https://reactjs.org/docs/portals.html
@@ -51,6 +52,6 @@ export const TableRenderCell: FC = () => (
 		<SampleDescription>
 			<p>This sample simulates the usage of React render functions for the table column contents.</p>
 		</SampleDescription>
-		<KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />
+		<KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />
 	</>
 );

packages/themes/bmf/src/index.ts

@@ -2136,6 +2136,7 @@ export const BMF = KoliBri.createTheme('bmf', {
 			top: 1rem;
 			right: 1rem;
 			width: 440px;
+			max-width: 100%;
 		}
 		.toast {
 			margin-top: 1rem;

packages/themes/default/src/index.ts

@@ -1859,6 +1859,7 @@ export const DEFAULT = KoliBri.createTheme('default', {
 			top: 1rem;
 			right: 1rem;
 			width: 440px;
+			max-width: 100%;
 		}
 		.toast {
 			margin-top: 1rem;

packages/themes/ecl/src/ecl-ec.ts

@@ -1495,6 +1495,7 @@ export const ECL_EC = KoliBri.createTheme('ecl-ec', {
 		top: 1rem;
 		right: 1rem;
 		width: 440px;
+		max-width: 100%;
 	}
 	.toast {
 		display: block;

packages/themes/ecl/src/ecl-eu.ts

@@ -1598,6 +1598,7 @@ export const ECL_EU = KoliBri.createTheme('ecl-eu', {
 			top: 1rem;
 			right: 1rem;
 			width: 440px;
+			max-width: 100%;
 		}
 		.toast {
 			display: block;

packages/themes/itzbund/src/index.ts

@@ -1522,6 +1522,7 @@ export const ITZBund = KoliBri.createTheme('itzbund', {
 	'KOL-TOAST-CONTAINER': `:host {
 		top: 1rem;
 		width: 750px;
+		max-width: 100%;
 		left: 50%;
 		transform: translateX(-50%);
 	}