remove underline and transition from ToggleableList (#2051)

Co-authored-by: Kate Golovanova <[email protected]>

Author: anurag2787

frontend/__tests__/unit/components/ToggleableList.test.tsx

@@ -169,7 +169,7 @@ describe('ToggleableList', () => {
     expect(header).toHaveClass('mb-4', 'text-2xl', 'font-semibold')
   })
 
-  it('applies correct CSS to button items', () => {
+  it('applies correct CSS to button items (no underline, no transition, only hover background)', () => {
     const randomItems = ['React', 'Vue', 'Angular']
     render(<ToggleableList items={randomItems} label="Styled Buttons" />)
     const button = screen.getByText('React')
@@ -180,14 +180,16 @@ describe('ToggleableList', () => {
       'px-3',
       'py-1',
       'text-sm',
-      'transition-all',
-      'duration-200',
-      'ease-in-out',
-      'hover:scale-105',
       'hover:bg-gray-200',
-      'hover:underline',
       'dark:border-gray-300',
       'dark:hover:bg-gray-700'
     )
+    expect(button).not.toHaveClass(
+      'hover:underline',
+      'transition-all',
+      'duration-200',
+      'ease-in-out',
+      'hover:scale-105'
+    )
   })
 })

frontend/src/components/ToggleableList.tsx

@@ -37,7 +37,7 @@ const ToggleableList = ({
         {(showAll ? items : items.slice(0, limit)).map((item, index) => (
           <button
             key={index}
-            className="rounded-lg border border-gray-400 px-3 py-1 text-sm transition-all duration-200 ease-in-out hover:scale-105 hover:bg-gray-200 hover:underline dark:border-gray-300 dark:hover:bg-gray-700"
+            className="rounded-lg border border-gray-400 px-3 py-1 text-sm hover:bg-gray-200 dark:border-gray-300 dark:hover:bg-gray-700"
             onClick={() => handleButtonClick({ item })}
           >
             {item}