fix: update layout classes for better responsiveness in various components

Refs: #7627

Author: deleonio

packages/samples/react/src/components/badge/basic.tsx

@@ -11,7 +11,7 @@ export const BadgeBasic: FC = () => (
 			<p>KolBadge shows badges with a label, background color and optional icon.</p>
 		</SampleDescription>
 
-		<div className="flex gap-2">
+		<div className="flex flex-wrap gap-2">
 			<KolBadge _label="black"></KolBadge>
 			<KolBadge _color="#86ffc6" _label="teal"></KolBadge>
 			<KolBadge _color="#06539e" _label="blue"></KolBadge>

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

@@ -23,7 +23,7 @@ export const BadgeButton: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<div className="flex gap-2">
+		<div className="flex flex-wrap gap-2">
 			<KolBadge {...createBadgeProps('black')}></KolBadge>
 			<KolBadge _color="#86ffc6" {...createBadgeProps('teal')}></KolBadge>
 			<KolBadge _color="#06539e" {...createBadgeProps('blue')}></KolBadge>

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

@@ -19,7 +19,7 @@ export const ButtonBaselined: FC = () => {
 				<p>This KolButton sample is used for internal testing purposes: It features multiple buttons with and without icons which are vertically aligned.</p>
 			</SampleDescription>
 
-			<div className="flex">
+			<div className="flex flex-wrap gap-2">
 				<KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>
 				<KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>
 				<KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>

packages/samples/react/src/components/link-button/aria-description.tsx

@@ -9,7 +9,7 @@ export const LinkButtonAriaDescription: FC = () => (
 			<p>This sample shows KolLinkButton with aria-description</p>
 		</SampleDescription>
 
-		<div className="flex flex-wrap gap-4">
+		<div className="flex flex-wrap gap-2">
 			<KolLinkButton _href="#/back-page" _label="Link Button Text without area description"></KolLinkButton>
 			<KolLinkButton _href="#/back-page" _label="Link Button Text" _ariaDescription="Link Button Area Description"></KolLinkButton>
 		</div>

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

@@ -15,16 +15,14 @@ export const LinkButtonBasic: FC = () => (
 			<p>KolLinkButton renders a link that looks like a button. The sample shows the different styling variants.</p>
 		</SampleDescription>
 
-		<div className="grid 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>
-				<KolLinkButton _label="Danger" _variant="danger" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Ghost" _variant="ghost" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Access Key" _variant="primary" _accessKey="c" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Short Key" _variant="primary" _shortKey="s" {...ARGS}></KolLinkButton>
-			</div>
+		<div className="flex flex-wrap gap-2">
+			<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Secondary" _variant="secondary" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Normal" _variant="normal" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Danger" _variant="danger" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Ghost" _variant="ghost" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Access Key" _variant="primary" _accessKey="c" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Short Key" _variant="primary" _shortKey="s" {...ARGS}></KolLinkButton>
 		</div>
 	</>
 );

packages/samples/react/src/components/tree/basic.tsx

@@ -66,7 +66,7 @@ export const TreeBasic: FC = () => {
 
 			<p>Current tree item: {subPage ?? 'none'}</p>
 
-			<div className="flex flex-row gap-2">
+			<div className="flex flex-wrap gap-2">
 				<KolButton _label="Change label for '1 Home'" _on={{ onClick: updateHomeLabel }}></KolButton>
 				<KolButton _label="Toggle '2.1.2.2 Pets'" _on={{ onClick: () => setShowPets(!showPets) }}></KolButton>
 				<KolButton _label="Toggle '2.2.1 Europe' (two levels at once)" _on={{ onClick: () => setShowEurope(!showEurope) }}></KolButton>

packages/samples/react/src/style.scss

@@ -23,10 +23,7 @@ hr {
 
 .indented-text {
 	p {
-		font-family: var(--font-family);
-		border-left: -2px solid var(--color-primary-variant);
-		padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));
-		margin-left: rem(-2);
+		margin: 0;
 	}
 }