Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Change Symbols alignement

Browse source
This commit is contained in:
Guillaume Tauzin 2022-11-04 15:42:59 +01:00
parent db7cca06aa
commit 9dced69e8d
1 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/Components/Symbols/Symbols.tsx
View file

@ -16,7 +16,7 @@ export function Symbols(props: ISymbolsProps): JSX.Element {
if (componentOption.Image.Url !== undefined || componentOption.Image.Base64Image !== undefined) { if (componentOption.Image.Url !== undefined || componentOption.Image.Base64Image !== undefined) {
const url = componentOption.Image.Base64Image ?? componentOption.Image.Url; const url = componentOption.Image.Base64Image ?? componentOption.Image.Url;
return (<button type="button" 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} key={componentOption.Name}
id={componentOption.Name} id={componentOption.Name}
title={componentOption.Name} title={componentOption.Name}
@ -30,8 +30,8 @@ export function Symbols(props: ISymbolsProps): JSX.Element {
src={url} src={url}
/> />
</div> </div>
<div> <div className='ml-5'>
{TruncateString(componentOption.Name, 5)} {TruncateString(componentOption.Name, 20)}
</div> </div>
</button>); </button>);
} }
@ -52,7 +52,7 @@ export function Symbols(props: ISymbolsProps): JSX.Element {
return ( return (
<div className='h-full overflow-y-auto'> <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'> overflow-auto m-2 md:text-xs font-bold'>
{listElements} {listElements}
</div> </div>