Fixed some minor admin bugs (#6335)

Author: SamTV12345

admin/src/index.css

@@ -250,10 +250,18 @@ td, th {
     color: #666;
 }
 
+
+.settings-page {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    height: 100%;
+}
+
 .settings {
+    flex-grow: max(1, 1);
     outline: none;
     width: 100%;
-    min-height: 80vh;
     resize: none;
 }
 

admin/src/pages/HelpPage.tsx

@@ -21,7 +21,7 @@ export const HelpPage = () => {
             return <div key={hookName+i}>
                 <h3>{hookName}</h3>
                 <ul>
-                    {Object.keys(hooks[hookName]).map((hook, i) => <li>{hook}
+                    {Object.keys(hooks[hookName]).map((hook, i) => <li key={hook+i}>{hook}
                         <ul key={hookName+hook+i}>
                             {Object.keys(hooks[hookName][hook]).map((subHook, i) => <li key={i}>{subHook}</li>)}
                         </ul>
@@ -46,12 +46,12 @@ export const HelpPage = () => {
         </div>
         <h2><Trans i18nKey="admin_plugins.installed"/></h2>
         <ul>
-            {helpData.installedPlugins.map((plugin, i) => <li key={i}>{plugin}</li>)}
+            {helpData.installedPlugins.map((plugin, i) => <li key={plugin+i}>{plugin}</li>)}
         </ul>
 
         <h2><Trans i18nKey="admin_plugins_info.parts"/></h2>
         <ul>
-            {helpData.installedParts.map((part, i) => <li key={i}>{part}</li>)}
+            {helpData.installedParts.map((part, i) => <li key={part+i}>{part}</li>)}
         </ul>
 
         <h2><Trans i18nKey="admin_plugins_info.hooks"/></h2>

admin/src/pages/HomePage.tsx

@@ -150,7 +150,7 @@ export const HomePage = () => {
             <tbody style={{overflow: 'auto'}}>
             {sortedInstalledPlugins.map((plugin, index) => {
                 return <tr key={index}>
-                    <td>{plugin.name}</td>
+                    <td><a rel="noopener noreferrer" href={`https://npmjs.com/${plugin.name}`} target="_blank">{plugin.name}</a></td>
                     <td>{plugin.version}</td>
                     <td>
                     {

admin/src/pages/SettingsPage.tsx

@@ -8,7 +8,7 @@ export const SettingsPage = ()=>{
     const settingsSocket = useStore(state=>state.settingsSocket)
     const settings = useStore(state=>state.settings)
 
-    return <div>
+    return <div className="settings-page">
         <h1><Trans i18nKey="admin_settings.current"/></h1>
         <textarea value={settings} className="settings" onChange={v => {
             useStore.getState().setSettings(v.target.value)