feat(frontend): improve layout of copy ip address buttons in About

apps/frontend/src/app/settings/-components/CopyButton/index.tsx

@@ -1,29 +1,35 @@
 import './index.css'
 
 import { Button, Tooltip } from '@mui/material'
+import classNames from 'classnames'
+import { noop } from 'radashi'
+import { ReactNode } from 'react'
 
 import { useCopyToClipboard } from '~/hooks'
 
 type CopyButtonProps = {
+  className?: string,
   copyText: string,
-  onClick?: () => Record<string, any>,
-  children: React.ReactNode,
-  style?: Record<string, any>,
+  onClick?: () => void,
+  children: ReactNode,
 }
 
-const CopyButton = (
-  { copyText, onClick: originalOnClick = () => ( {} ), ...props }: CopyButtonProps
-) => {
+const CopyButton = ( {
+  className,
+  copyText,
+  onClick = noop,
+  ...props
+}: CopyButtonProps ) => {
   const copyToClipboard = useCopyToClipboard()
 
-  const onClick = () => {
-    originalOnClick()
+  const handleClick = () => {
+    onClick()
     copyToClipboard( copyText )
   }
 
   return (
     <Tooltip title="Click to copy">
-      <Button className="copy-button" {...props} onClick={onClick} />
+      <Button className={classNames( 'copy-button', className )} {...props} onClick={handleClick} />
     </Tooltip>
   )
 }

apps/frontend/src/app/settings/server/about/index.css

@@ -0,0 +1,4 @@
+.copy-address {
+  padding: 2px 0;
+  display: block;
+}

apps/frontend/src/app/settings/server/about/index.tsx

@@ -1,3 +1,5 @@
+import './index.css'
+
 import { CircularProgress, Grid, List, ListItem, Typography } from '@mui/material'
 import { createFileRoute } from '@tanstack/react-router'
 
@@ -33,9 +35,17 @@ export const About = ( { connected }: AboutProps ) => {
         <Grid container>
           <Grid item xs={6}><Typography variant="body2">Server Address</Typography></Grid>
           <Grid item xs={6}>
-            {Object.entries( about.addresses ).map( ( [ name, address ] ) => (
-              <CopyButton copyText={`http://${address}:${PORT}`}>{`${address}:${PORT} (${name})`}</CopyButton>
-            ) )}
+            {Object
+              .entries( about.addresses )
+              .map( ( [ name, address ] ) => (
+                <CopyButton
+                  key={address}
+                  className="copy-address"
+                  copyText={`http://${address}:${PORT}`}
+                >
+                  {`${address}:${PORT} (${name})`}
+                </CopyButton>
+              ) )}
           </Grid>
         </Grid>
       </ListItem>