Change css class for sidebar and symbols

src/Components/Sidebar/Sidebar.tsx

@@ -23,7 +23,7 @@ export function Sidebar(props: ISidebarProps): JSX.Element {
       draggable={true}
       onDragStart={(event) => HandleDragStart(event)}
     >
-      {TruncateString(componentOption.Type, 5)}
+      {TruncateString(componentOption.Type, 25)}
     </button>
   );
 
@@ -35,7 +35,7 @@ export function Sidebar(props: ISidebarProps): JSX.Element {
       <div className='bg-slate-100 sidebar-title'>
           Components
       </div>
-      <div className='grid grid-cols-1 md:grid-cols-3 gap-2
+      <div className='grid grid-cols-1 md:grid-cols-1 gap-2
          m-2 md:text-xs font-bold'>
         {listElements}
       </div>

src/Components/Symbols/Symbols.tsx

@@ -27,7 +27,7 @@ export function Symbols(props: ISymbolsProps): JSX.Element {
       >
         <div>
           <img
-            className='transition-all h-12 w-full object-cover'
+            className='transition-all h-12 w-full object-contain'
             src={url}
           />
         </div>

src/index.scss

@@ -8,7 +8,7 @@
   }
 
   .sidebar-component {
-    @apply transition-all px-2 py-6 text-sm rounded-lg bg-slate-300/60 hover:bg-slate-300
+    @apply transition-all px-2 py-6 text-sm rounded-lg bg-slate-300/60 hover:bg-blue-500 hover:text-slate-50
   }
 
   .sidebar-component-card {