Issue #198#203/HOTFIX

src/app/components/Cards.js

@@ -164,7 +164,7 @@ export default function Cards(props) {
           </>
           :
           <>
-            <div className="flex flex-row mt-4 mb-2 ml-2 justify-start">
+            <div className="flex flex-row mt-4 mb-2 justify-start">
               {props?.noAvatar || !props["avatar"] ? <div className={`flex items-center justify-center text-xl font-bold ml-4 text-main rounded-full h-[33px] w-[33px] ${getRandomBg(props["id"])}`} >{props["author"][0]}</div>
                 :
                 <img
@@ -176,7 +176,7 @@ export default function Cards(props) {
 
               }
               <div className="mx-2">
-                <div className="line-clamp-1 text-sm text-main-text font-bold text-text-filter mb- w-[278px] min-h-4"> {props["title"]}  </div>
+                <div className="line-clamp-1 text-sm text-main-text font-bold text-text-filter mb- w-[100%] min-h-4"> {props["title"]}  </div>
                 <div className="flex flex-row ">
                   <div>
                     <div className="line-clamp-1 text-text-color text-sm font-light" >

src/app/components/GroupCardsCollections.js

@@ -70,6 +70,22 @@ export default function GroupCardsCollections({ data, cardsPerRow }) {
               </p>
             </button>
           ) : null}
+
+        {data?.length > 1 ?
+          < button
+            fullWidth
+            disableElevation
+            variant="outlined"
+            className="hover:bg-main -ml-4 py-2 border-hidden rounded-xl  normal-case flex justify-center sm:hidden"
+            onClick={toggleContent}
+          >
+            <p className=" px-4 text-main-text-click text-lg rounded-md"
+              alt={expanded ? "Ver menos" : "Ver mais..."}
+            >
+              {expanded ? "Ver menos" : "Ver mais..."}
+            </p>
+          </button>
+        : null}  
       </>
     </div >
   );

src/app/perfil/[id]/components/NotFound.js

 export default function NotFound({ name }) {
     return (
-        <div className="flex justify-center">
+        <div className="flex justify-center min-h-[180px]">
             <p className="pt-12 text-text-filter text-lg">{name === "Seguindo" ? `O usuário não segue ninguém ainda.` : `O usuário não possui ${name}`}</p>
         </div>
     )

src/app/perfil/[id]/components/ProfileCollections.js

@@ -49,6 +49,21 @@ export default function ProfileCollections({ id, idLogin }) {
   const client = getStoredValue("client");
   const uid = getStoredValue("uid");
   const [got, setGot] = useState(false)
+  const [cardsPerRow, setCardsPerRow] = useState(0);
+
+  const getWidth = async () => {
+    return document.getElementById('content')?.scrollWidth;
+  };
+
+  /**
+   * pega o tamanho da tela caso esse seja alterado
+  */
+  useEffect(() => {
+    getWidth().then((res) => {
+      setCardsPerRow(Math.floor(res / 300));
+    });
+  }, []);
+
 
   useEffect(() => {
     /**
@@ -151,7 +166,7 @@ export default function ProfileCollections({ id, idLogin }) {
   return (
     <>
       {got ? (
-        <div className=' p-2 mb-10 rounded-md min-w-[200px] min-h-[180px]'>
+        <div id="content" className=' p-2 mb-10 rounded-md min-w-[200px] min-h-[180px]'>
           <div className="flex justify-end pr-10">
 
             <CreateCollectionModal open={collectionOpen} onClose={() => setCollectionOpen(false)} idLogin={idLogin} />
@@ -176,12 +191,8 @@ export default function ProfileCollections({ id, idLogin }) {
                 <div className="" key={index}>
                   <div key={item.id}>
                     <div className="bg-white outline outline-1 outline-outlineColor mb-10 pt-6 px-4  rounded-2xl">
-
-
-
                       <div className="flex flex-row w-full flex-wrap justify-between">
                         <div className="flex flex-col">
-
                           <p className="text-2xl  font-bold mb-0 text-text-color mr-2 inline-block">
                             {item.name}
                           </p>
@@ -206,7 +217,7 @@ export default function ProfileCollections({ id, idLogin }) {
                           }
                         </div>
                       </div>
-                      <GroupCardsCollections cardsPerRow={4} data={item.collection_items} />
+                      <GroupCardsCollections cardsPerRow={cardsPerRow} data={item.collection_items} />
                     </div>
                   </div>
                 </div>

src/app/perfil/[id]/components/ProfileResources.js

@@ -79,7 +79,7 @@ export default function ProfileResources({ id, idLogin }) {
           {totalCount === 0 ? (
             <NotFound name="recursos" />
           ) : (
-                        <div className="p-3 my-5 rounded-md min-w-[200px] min-h-[180px] bg-white">
+            <div className="p-3 my-5 mx-5 rounded-md min-w-[200px] min-h-[180px] bg-white">
               <div className="flex flex-wrap justify-center">
                 {resources.map((resource, index) => (
                   <Cards