fix: Multiple UI component improvements and code quality enhancements (#23446)

web/app/components/apps/footer.tsx

@@ -36,13 +36,13 @@ const Footer = () => {
     return null
 
   return (
-    <footer className='shrink-0 grow-0 px-12 py-2 relative'>
+    <footer className='relative shrink-0 grow-0 px-12 py-2'>
       <button
         onClick={handleClose}
-        className='absolute top-2 right-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full transition-colors duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-800'
+        className='absolute right-2 top-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full transition-colors duration-200 ease-in-out hover:bg-components-main-nav-nav-button-bg-active'
         aria-label="Close footer"
       >
-        <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+        <RiCloseLine className='h-4 w-4 text-text-tertiary hover:text-text-secondary' />
       </button>
       <h3 className='text-gradient text-xl font-semibold leading-tight'>{t('app.join')}</h3>
       <p className='system-sm-regular mt-1 text-text-tertiary'>{t('app.communityIntro')}</p>

web/app/components/base/icons/utils.ts

@@ -14,9 +14,26 @@ export type Attrs = {
 
 export function normalizeAttrs(attrs: Attrs = {}): Attrs {
   return Object.keys(attrs).reduce((acc: Attrs, key) => {
+    // Filter out editor metadata attributes before processing
+    if (key.startsWith('inkscape:')
+        || key.startsWith('sodipodi:')
+        || key.startsWith('xmlns:inkscape')
+        || key.startsWith('xmlns:sodipodi')
+        || key.startsWith('xmlns:svg')
+        || key === 'data-name')
+      return acc
+
     const val = attrs[key]
     key = key.replace(/([-]\w)/g, (g: string) => g[1].toUpperCase())
     key = key.replace(/([:]\w)/g, (g: string) => g[1].toUpperCase())
+
+    // Additional filter after camelCase conversion
+    if (key === 'xmlnsInkscape'
+        || key === 'xmlnsSodipodi'
+        || key === 'xmlnsSvg'
+        || key === 'dataName')
+      return acc
+
     switch (key) {
       case 'class':
         acc.className = val

web/app/components/base/tag-management/filter.tsx

@@ -139,7 +139,10 @@ const TagFilter: FC<TagFilterProps> = ({
             </div>
             <div className='border-t-[0.5px] border-divider-regular' />
             <div className='p-1'>
-              <div className='flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover' onClick={() => setShowTagManagementModal(true)}>
+              <div className='flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover' onClick={() => {
+                setShowTagManagementModal(true)
+                setOpen(false)
+              }}>
                 <Tag03 className='h-4 w-4 text-text-tertiary' />
                 <div className='grow truncate text-sm leading-5 text-text-secondary'>
                   {t('common.tag.manageTags')}