From 9c485a7d3d96954dc65dce0f7e7c4879df38d6c7 Mon Sep 17 00:00:00 2001
From: cristiano cardelli <cristianocardelli@gmail.com, cristiano@welance.com>
Date: Wed, 13 Nov 2024 13:26:35 +0100
Subject: [PATCH] fix organizations view on mobile - hidden scroll labels -
 overflowing links

---
 src/shared/components/draggable-wrapper.tsx      | 2 +-
 src/shared/components/info-tag/index.tsx         | 4 ++--
 src/shared/components/info-tag/info-tag-link.tsx | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/shared/components/draggable-wrapper.tsx b/src/shared/components/draggable-wrapper.tsx
index 791dfee3..c3443711 100644
--- a/src/shared/components/draggable-wrapper.tsx
+++ b/src/shared/components/draggable-wrapper.tsx
@@ -13,7 +13,7 @@ interface Props {
   className?: ClassValue;
 }
 
-const WRAPPER_CLASSNAME = 'hide-scrollbar p-1';
+const WRAPPER_CLASSNAME = 'hide-scrollbar p-1 overflow-auto';
 
 export const DraggableWrapper = (props: Props) => {
   const { children, className } = props;
diff --git a/src/shared/components/info-tag/index.tsx b/src/shared/components/info-tag/index.tsx
index c3b60cfc..75ab2b4e 100644
--- a/src/shared/components/info-tag/index.tsx
+++ b/src/shared/components/info-tag/index.tsx
@@ -29,11 +29,11 @@ export const InfoTag = (props: Props) => {
 
   const content = (
     <>
-      {icon}
+      <div className='shrink-0'>{icon}</div>
       <span className="max-w-[32ch] truncate text-sm md:max-w-[44ch] lg:text-xs">
         {text}
       </span>
-      {showExternalIcon && <ExternalIcon />}
+      <div className='shrink-0'>{showExternalIcon && <ExternalIcon />}</div>
     </>
   );
 
diff --git a/src/shared/components/info-tag/info-tag-link.tsx b/src/shared/components/info-tag/info-tag-link.tsx
index db963213..29b29f57 100644
--- a/src/shared/components/info-tag/info-tag-link.tsx
+++ b/src/shared/components/info-tag/info-tag-link.tsx
@@ -18,8 +18,8 @@ export const InfoTagLink = ({ className, href, content }: Props) => {
   };
 
   return (
-    <Button className={className} onClick={onClick}>
-      <div className="flex items-center gap-x-2">{content}</div>
+    <Button className={`${className} max-w-full`} onClick={onClick}>
+      <div className="flex max-w-full items-center gap-x-2">{content}</div>
     </Button>
   );
 };