fix translation and button css

apps/app/src/client/components/Admin/AdminHome/AdminHome.jsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import { Trans, useTranslation } from 'next-i18next';
+import { useTranslation } from 'next-i18next';
 import PropTypes from 'prop-types';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { Tooltip } from 'reactstrap';
@@ -98,9 +98,12 @@ const AdminHome = (props) => {
             {t('admin:admin_top.list_of_env_vars')}
           </h2>
           <p>{t('admin:admin_top.env_var_priority')}</p>
-          <p>
-            <Trans i18nKey="admin:admin_top.about_security" t={t} />
-          </p>
+          <p
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: ignore
+            dangerouslySetInnerHTML={{
+              __html: t('admin:admin_top.about_security'),
+            }}
+          />
           <EnvVarsTable envVars={adminHomeContainer.state.envVars} />
         </div>
       </div>
@@ -134,9 +137,13 @@ const AdminHome = (props) => {
             >
               {t('admin:admin_top:copy_prefilled_host_information:done')}
             </Tooltip>
-            <span className="ms-2">
-              <Trans i18nKey="admin:admin_top:submit_bug_report" t={t} />
-            </span>
+            <span
+              className="ms-2"
+              // biome-ignore lint/security/noDangerouslySetInnerHtml: ignore
+              dangerouslySetInnerHTML={{
+                __html: t('admin:admin_top:submit_bug_report'),
+              }}
+            />
           </div>
         </div>
       </div>

apps/app/src/client/components/Admin/ExportArchiveData/SelectCollectionsModal.tsx

@@ -1,5 +1,5 @@
 import React, { type JSX, useCallback, useEffect, useState } from 'react';
-import { Trans, useTranslation } from 'next-i18next';
+import { useTranslation } from 'next-i18next';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 
 import { apiPost } from '~/client/util/apiv1-client';
@@ -121,12 +121,13 @@ const SelectCollectionsModal = (props: Props): JSX.Element => {
       return <></>;
     }
 
+    const html = t('admin:export_management.desc_password_seed');
+
     return (
       <div className="card">
         <div className="card-body">
-          <p className="card-text">
-            <Trans i18nKey="admin:export_management.desc_password_seed" t={t} />
-          </p>
+          {/** biome-ignore lint/security/noDangerouslySetInnerHtml: ignore */}
+          <p className="card-text" dangerouslySetInnerHTML={{ __html: html }} />
         </div>
       </div>
     );

apps/app/src/client/components/Admin/UserManagement.module.scss

@@ -8,18 +8,21 @@
   // corner radius
   border-top-right-radius: bs.$border-radius;
   border-bottom-right-radius: bs.$border-radius;
-  .rbt-input-main {
+  .rbt-input-main,
+  input {
     padding-right: 36px;
   }
   .search-clear {
     position: absolute;
-    top: 15px;
-    right: 1px;
+    top: 50%;
+    right: 6px;
     z-index: 3;
     width: 24px;
     height: 24px;
     padding: 0;
+    margin-right: 0;
     line-height: 0;
+    transform: translateY(-50%);
   }
 
   .rbt-menu {