feat: improve mobile view

ost-cas-fee-adv-22-23 · Apr 16, 2023 · bff592d · bff592d
1 parent 6b608dd
commit bff592d
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',