From 9dced69e8da23bc6acd91db4c6ed1503133b113a Mon Sep 17 00:00:00 2001
From: Guillaume Tauzin <gtauzin@techform.fr>
Date: Fri, 4 Nov 2022 15:42:59 +0100
Subject: [PATCH] Change Symbols alignement

---
 src/Components/Symbols/Symbols.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Components/Symbols/Symbols.tsx b/src/Components/Symbols/Symbols.tsx
index 44e6bd9..ca1c500 100644
--- a/src/Components/Symbols/Symbols.tsx
+++ b/src/Components/Symbols/Symbols.tsx
@@ -16,7 +16,7 @@ export function Symbols(props: ISymbolsProps): JSX.Element {
     if (componentOption.Image.Url !== undefined || componentOption.Image.Base64Image !== undefined) {
       const url = componentOption.Image.Base64Image ?? componentOption.Image.Url;
       return (<button type="button"
-        className='justify-center sidebar-component-card hover:h-full'
+        className='flex justify-start items-center sidebar-component-card hover:h-full'
         key={componentOption.Name}
         id={componentOption.Name}
         title={componentOption.Name}
@@ -30,8 +30,8 @@ export function Symbols(props: ISymbolsProps): JSX.Element {
             src={url}
           />
         </div>
-        <div>
-          {TruncateString(componentOption.Name, 5)}
+        <div className='ml-5'>
+          {TruncateString(componentOption.Name, 20)}
         </div>
       </button>);
     }
@@ -52,7 +52,7 @@ export function Symbols(props: ISymbolsProps): JSX.Element {
 
   return (
     <div className='h-full overflow-y-auto'>
-      <div className='grid grid-cols-1 md:grid-cols-3 gap-2
+      <div className='grid grid-cols-1 md:grid-cols-1 gap-2
          overflow-auto m-2 md:text-xs font-bold'>
         {listElements}
       </div>