From 563f25d08753bbe8cc6cca5b377836ceef1ea64b Mon Sep 17 00:00:00 2001
From: Florian Sommariva <florian.sommariva@makina-corpus.com>
Date: Tue, 31 Oct 2023 16:30:43 +0100
Subject: [PATCH] Restyle show more poi card

---
 .../components/DetailsCard/DetailsCard.tsx    | 50 +++++++++----------
 .../__snapshots__/DetailsCard.test.tsx.snap   | 12 ++---
 2 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/pages/details/components/DetailsCard/DetailsCard.tsx b/frontend/src/components/pages/details/components/DetailsCard/DetailsCard.tsx
index 72a314dc3..9edddb174 100644
--- a/frontend/src/components/pages/details/components/DetailsCard/DetailsCard.tsx
+++ b/frontend/src/components/pages/details/components/DetailsCard/DetailsCard.tsx
@@ -78,7 +78,7 @@ export const DetailsCard: React.FC<DetailsCardPropsWithHandleViewPointClick> = (
       overflow-hidden desktop:w-auto
       h-fit desktop:flex-row
       transition-all duration-500`,
-          truncateState !== 'NONE' ? 'desktop:h-auto pb-6' : 'desktop:h-55',
+          truncateState !== 'NONE' ? 'desktop:h-auto' : 'desktop:h-55',
           truncateState === 'TRUNCATE' && hasMedia && 'desktop:h-55',
         )}
         onMouseEnter={() => {
@@ -116,7 +116,7 @@ export const DetailsCard: React.FC<DetailsCardPropsWithHandleViewPointClick> = (
             <CardIcon iconUri={iconUri} iconName={iconName} color={getActivityColor(type)} />
           </div>
         </div>
-        <div ref={detailsCardRef} className="p-2 pb-6 desktop:p-6">
+        <div ref={detailsCardRef} className="p-2 desktop:p-6">
           {place && (
             <OptionalLink redirectionUrl={redirectionUrl}>
               <p className="text-greyDarkColored">{place}</p>
@@ -139,31 +139,29 @@ export const DetailsCard: React.FC<DetailsCardPropsWithHandleViewPointClick> = (
                 </div>
               )}
               {truncateState !== 'NONE' && (
-                <div className="flex justify-center absolute bottom-0 border-solid border-t border-greySoft left-0 right-0 py-2 w-full px-4 bg-white rounded-b-card">
-                  <button
-                    className="flex desktop:ml-auto items-center text-primary1 underline shrink-0 gap-1 self-end"
-                    onClick={toggleTruncateState}
-                    type="button"
-                    aria-hidden
-                  >
-                    <span className="shrink-0">
-                      <FormattedMessage
-                        id={
-                          truncateState === 'TRUNCATE'
-                            ? 'details.moreInformation'
-                            : 'details.lessInformation'
-                        }
-                      />
-                    </span>
-                    <Arrow
-                      size={20}
-                      className={cn(
-                        'shrink-0 transition',
-                        truncateState === 'TRUNCATE' ? 'rotate-90' : '-rotate-90',
-                      )}
+                <button
+                  className="flex m-auto desktop:mr-0 items-center text-primary1 underline shrink-0 gap-1 self-end"
+                  onClick={toggleTruncateState}
+                  type="button"
+                  aria-hidden
+                >
+                  <span className="shrink-0">
+                    <FormattedMessage
+                      id={
+                        truncateState === 'TRUNCATE'
+                          ? 'details.moreInformation'
+                          : 'details.lessInformation'
+                      }
                     />
-                  </button>
-                </div>
+                  </span>
+                  <Arrow
+                    size={20}
+                    className={cn(
+                      'shrink-0 transition',
+                      truncateState === 'TRUNCATE' ? 'rotate-90' : '-rotate-90',
+                    )}
+                  />
+                </button>
               )}
             </>
           )}
diff --git a/frontend/src/components/pages/details/components/DetailsCard/__tests__/__snapshots__/DetailsCard.test.tsx.snap b/frontend/src/components/pages/details/components/DetailsCard/__tests__/__snapshots__/DetailsCard.test.tsx.snap
index 0a9799596..ba527d415 100644
--- a/frontend/src/components/pages/details/components/DetailsCard/__tests__/__snapshots__/DetailsCard.test.tsx.snap
+++ b/frontend/src/components/pages/details/components/DetailsCard/__tests__/__snapshots__/DetailsCard.test.tsx.snap
@@ -88,7 +88,7 @@ Object {
             </div>
           </div>
           <div
-            class="p-2 pb-6 desktop:p-6"
+            class="p-2 desktop:p-6"
           >
             <h3
               class="mb-1 text-Mobile-C1 desktop:text-H4 text-primary1 font-bold"
@@ -311,7 +311,7 @@ Object {
             </div>
           </div>
           <div
-            class="p-2 pb-6 desktop:p-6"
+            class="p-2 desktop:p-6"
           >
             <h3
               class="mb-1 text-Mobile-C1 desktop:text-H4 text-primary1 font-bold"
@@ -414,7 +414,7 @@ Object {
           </div>
         </div>
         <div
-          class="p-2 pb-6 desktop:p-6"
+          class="p-2 desktop:p-6"
         >
           <h3
             class="mb-1 text-Mobile-C1 desktop:text-H4 text-primary1 font-bold"
@@ -574,7 +574,7 @@ Object {
             </div>
           </div>
           <div
-            class="p-2 pb-6 desktop:p-6"
+            class="p-2 desktop:p-6"
           >
             <h3
               class="mb-1 text-Mobile-C1 desktop:text-H4 text-primary1 font-bold"
@@ -797,7 +797,7 @@ Object {
             </div>
           </div>
           <div
-            class="p-2 pb-6 desktop:p-6"
+            class="p-2 desktop:p-6"
           >
             <h3
               class="mb-1 text-Mobile-C1 desktop:text-H4 text-primary1 font-bold"
@@ -1021,7 +1021,7 @@ Object {
           </div>
         </div>
         <div
-          class="p-2 pb-6 desktop:p-6"
+          class="p-2 desktop:p-6"
         >
           <h3
             class="mb-1 text-Mobile-C1 desktop:text-H4 text-primary1 font-bold"