From bff592da91976864b6304490bd49c8d101d30b88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrgen=20Rudigier?= <juergen.rudigier@deptagency.com>
Date: Sun, 16 Apr 2023 15:16:23 +0200
Subject: [PATCH] feat: improve mobile view

---
 src/components/Atoms/Grid/Grid.tsx             | 2 +-
 src/components/Atoms/Headline/Headline.tsx     | 2 +-
 src/components/Atoms/Label/Label.tsx           | 6 +++++-
 src/components/Atoms/Richtext/Richtext.tsx     | 4 ++--
 src/components/Molecules/Card/Card.tsx         | 4 ++--
 src/components/Molecules/IconText/IconText.tsx | 7 ++++++-
 6 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/Atoms/Grid/Grid.tsx b/src/components/Atoms/Grid/Grid.tsx
index bd7fcad..3c97d17 100644
--- a/src/components/Atoms/Grid/Grid.tsx
+++ b/src/components/Atoms/Grid/Grid.tsx
@@ -44,7 +44,7 @@ type TGrid = {
 /*
  * Styles
  */
-export const GridBaseStyle = 'flex w-full';
+export const GridBaseStyle = 'flex w-full overflow-hidden';
 
 export const GridVariantStyleMap: Record<string, string> = {
 	row: 'flex-row',
diff --git a/src/components/Atoms/Headline/Headline.tsx b/src/components/Atoms/Headline/Headline.tsx
index 7cd13a5..587cf14 100644
--- a/src/components/Atoms/Headline/Headline.tsx
+++ b/src/components/Atoms/Headline/Headline.tsx
@@ -53,7 +53,7 @@ export const HeadlineSizeMap: Record<THeadline['level'], string> = {
  */
 
 export const Headline: FC<THeadlineProps> = ({ children, level = 1, as: Tag = `h${level}`, ...props }) => (
-	<Tag className={['leading-tight', HeadlineSizeMap[level]].join(' ')} {...props}>
+	<Tag className={['leading-tight', 'overflow-hidden text-ellipsis' HeadlineSizeMap[level]].join(' ')} {...props}>
 		{children}
 	</Tag>
 );
diff --git a/src/components/Atoms/Label/Label.tsx b/src/components/Atoms/Label/Label.tsx
index 5ea7fcc..6378aca 100644
--- a/src/components/Atoms/Label/Label.tsx
+++ b/src/components/Atoms/Label/Label.tsx
@@ -49,7 +49,11 @@ export const LabelSizeMap: Record<string, string> = {
  */
 
 export const Label: FC<TLabelProps> = ({ children = 'Label', as: Tag = 'span', size, ...rest }) => {
-	const style = ['inline-block leading-none font-semibold', LabelSizeMap[size]].join(' ');
+	const style = [
+		'inline-block font-semibold',
+		'overflow-hidden text-ellipsis mb-[-0.2em] pb-[0.2em]',
+		LabelSizeMap[size],
+	].join(' ');
 
 	const props = {
 		...rest,
diff --git a/src/components/Atoms/Richtext/Richtext.tsx b/src/components/Atoms/Richtext/Richtext.tsx
index 1ef7b69..2fbaefd 100644
--- a/src/components/Atoms/Richtext/Richtext.tsx
+++ b/src/components/Atoms/Richtext/Richtext.tsx
@@ -48,10 +48,10 @@ export const RichtextSizeMap: Record<string, string> = {
 
 const RichtextChildStyles: string[] = [
 	// Paragraphs
-	'[&>p]:block [&>p]:mb-2 [&>p:last-child]:mb-0',
+	'[&>p]:inline-flex [&>p]:mb-2 [&>p:last-child]:mb-0',
 
 	// Links
-	'[&>p>a]:inline-block [&>p>a]:text-violet-600 [&>p>a:hover]:text-violet-400',
+	'[&>p>a]:inline-block [&>p>a]:align-middle [&>p>a]:text-violet-600 [&>p>a:hover]:text-violet-400',
 
 	// Overflow & Ellipsis
 	'[&>p]:overflow-hidden [&>p]:text-ellipsis',
diff --git a/src/components/Molecules/Card/Card.tsx b/src/components/Molecules/Card/Card.tsx
index 4bebe51..ae8fa54 100644
--- a/src/components/Molecules/Card/Card.tsx
+++ b/src/components/Molecules/Card/Card.tsx
@@ -32,7 +32,7 @@ type TCard = {
 
 const sizeMap: Record<string, string> = {
 	S: 'py-s px-s',
-	M: 'py-l px-xl sm:py-m sm:px-l',
+	M: 'py-l px-xl sm:py-m sm:px-m',
 };
 
 /**
@@ -50,7 +50,7 @@ export const Card: FC<TCard> = ({ as: Tag = 'div', children, size = 'M', rounded
 	return (
 		<Tag
 			className={[
-				'relative after:flex flex-start justify-center items-start bg-white text-slate-900',
+				'relative flex-start justify-center items-start bg-white text-slate-900',
 				rounded ? 'rounded-3xl' : '',
 				sizeMap[size],
 			].join(' ')}
diff --git a/src/components/Molecules/IconText/IconText.tsx b/src/components/Molecules/IconText/IconText.tsx
index 4f5c1fb..1271244 100644
--- a/src/components/Molecules/IconText/IconText.tsx
+++ b/src/components/Molecules/IconText/IconText.tsx
@@ -35,7 +35,12 @@ type TIconText = {
  * Style
  */
 
-const IconTextBaseStyle: string[] = ['flex items-center', 'leading-none', 'rounded-full'];
+const IconTextBaseStyle: string[] = [
+	'flex items-center',
+	'leading-none',
+	'rounded-full',
+	'overflow-hidden text-ellipsis mb-[-0.2em] pb-[0.2em]',
+];
 
 export const IconTextSizeMap: Record<string, string> = {
 	S: 'text-sm gap-1 px-2 py-1',