From b6e46fb92e3ec14e8a823271adf4e803d5bb26ee Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sun, 6 Jul 2025 21:21:30 +0200
Subject: [PATCH] Some updates

---
 ui/src/components/TabloModal.tsx | 22 ++++++----------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/ui/src/components/TabloModal.tsx b/ui/src/components/TabloModal.tsx
index 1dd0406..9f30cc4 100644
--- a/ui/src/components/TabloModal.tsx
+++ b/ui/src/components/TabloModal.tsx
@@ -70,9 +70,9 @@ export const TabloModal = ({
   return (
     <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
       <ClickOutside onClickOutside={onClose}>
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-4 w-full max-w-xl min-w-[28rem] max-h-[90vh]">
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-xl min-w-[28rem] max-h-[90vh] flex flex-col p-4">
           {/* Header */}
-          <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+          <div className="flex items-center justify-between px-2 py-2 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
             {!readOnly && isEditingName ? (
               <ClickOutside onClickOutside={() => setIsEditingName(false)}>
                 <input
@@ -106,8 +106,8 @@ export const TabloModal = ({
             </button>
           </div>
 
-          {/* Content - Scrollable */}
-          <div className="flex-1 overflow-y-auto p-2">
+          {/* Content - Expandable */}
+          <div className="flex-grow p-2 overflow-y-auto">
             {readOnly ? (
               /* Read-only content */
               <div className="space-y-4 mb-4">
@@ -153,16 +153,6 @@ export const TabloModal = ({
                     {tablo.is_admin ? "Administrateur" : "Invité"}
                   </div>
                 </div>
-
-                {/* Members placeholder - can be expanded later */}
-                <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
-                  <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-3">
-                    Membres
-                  </h3>
-                  <div className="text-gray-500 dark:text-gray-400 text-sm">
-                    Vous avez accès à ce tablo en tant qu&apos;invité
-                  </div>
-                </div>
               </div>
             ) : (
               /* Editable content */
@@ -216,7 +206,7 @@ export const TabloModal = ({
           </div>
 
           {/* Members Section */}
-          <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
+          <div className="border-t border-gray-200 dark:border-gray-700 pt-4 px-2">
             <div className="flex items-center justify-between mb-3">
               <h3 className="text-lg font-medium text-gray-900 dark:text-white">
                 Membres
@@ -276,7 +266,7 @@ export const TabloModal = ({
           </div>
 
           {/* Footer */}
-          <div className="flex justify-end space-x-4 pt-4 pb-1 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
+          <div className="flex justify-end space-x-4 py-2 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
             {readOnly ? (
               <button
                 type="button"