Make organization selectron screen more responsive

MrBartusek · Apr 9, 2024 · 57b4311 · 57b4311
1 parent 3f35537
commit 57b4311
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/apps/client/src/components/FullFocusContainer.tsx b/apps/client/src/components/FullFocusContainer.tsx
@@ -11,8 +11,9 @@ function FullFocusContainer({ children, className }: FullFocusContainerProps) {
 			<div
 				className={classNames(
 					className,
-					'mx-4 rounded-xl border border-gray-300 bg-light px-24 py-20 shadow-xl',
+					'mx-4 rounded-xl border border-gray-300 bg-light shadow-xl',
 					'flex max-w-6xl flex-1',
+					'px-12 py-10 md:px-24 md:py-20',
 				)}
 			>
 				{children}

diff --git a/apps/client/src/components/Organization/OrganizationCard.tsx b/apps/client/src/components/Organization/OrganizationCard.tsx
@@ -18,7 +18,7 @@ function OrganizationCard({ organization }: OrganizationCardProps) {
 					<h3>{organization.name}</h3>
 				</span>
 				<div className="flex items-center gap-4">
-					<div className="flex items-center gap-3">
+					<div className="hidden items-center gap-3 md:flex">
 						<OrganizationStatsChip icon={BsWallet}>
 							<Currency>{organization.stats.totalValue}</Currency>
 						</OrganizationStatsChip>

diff --git a/apps/client/src/components/UserAvatar.tsx b/apps/client/src/components/UserAvatar.tsx
@@ -5,11 +5,15 @@ export interface UserAvatarProps {
 	user?: UserDto;
 	variant?: 'square' | 'circle';
 	size?: number;
+	className?: string;
 }
 
-function UserAvatar({ user, variant = 'square', size = 6 }: UserAvatarProps) {
+function UserAvatar({ user, variant = 'square', size = 6, className }: UserAvatarProps) {
 	return (
-		<div style={{ width: `${size / 4}rem` }}>
+		<div
+			style={{ width: `${size / 4}rem` }}
+			className={className}
+		>
 			<img
 				height={size * 4}
 				width={size * 4}

diff --git a/apps/client/src/components/UserInfo.tsx b/apps/client/src/components/UserInfo.tsx
@@ -26,6 +26,7 @@ function UserInfo() {
 				<UserAvatar
 					user={user}
 					variant="circle"
+					className="hidden sm:block"
 				/>
 				<div>{user.username}</div>
 				{user.isDemo && (