Some style tweaks

client/src/PlayerList.css

@@ -4,7 +4,6 @@
   padding: 0.5em;
   user-select: none;
   flex-direction: column;
-  margin: 0.25rem 0.25rem 0.25rem 0;
 }
 
 .PlayerList .Name {
@@ -53,6 +52,7 @@
   gap: 0.25rem;
   flex-direction: row;
   align-items: start;
+  width: 100%;
 }
 
 .PlayerList .PlayerSelector.MuiList-padding {

client/src/PlayerList.tsx

@@ -162,7 +162,8 @@ const PlayerList: React.FC = () => {
         sx={{
           maxWidth: { xs: '100%', sm: 500 },
           p: { xs: 1, sm: 2 },
-          m: { xs: 0, sm: 2 },
+          mt: 0.5,
+          mb: 0.5,
         }}
       >
         <MediaAgent {...{ session, peers, setPeers }} />

client/src/Trade.css

@@ -28,7 +28,7 @@
   font-weight: bold;
 }
 
-.Trade .PlayerList {
+.Trade .TradeList {
   padding: 0;
   background-color:rgba(224, 224, 224);
   margin: 0.25rem 0;
@@ -188,7 +188,10 @@
   flex-direction: row;
   align-items: center;
   flex: 1;
+  padding: 0.25rem;
   border-bottom: 1px solid #ccc;
+  min-height: fit-content;
+  box-sizing: border-box;
 }
 
 .Trade .TradeLine:last-child {

client/src/Trade.tsx

@@ -12,6 +12,7 @@ import { GlobalContext } from './GlobalContext';
 import { assetsPath } from './Common';
 
 import './Trade.css';
+import { Box } from '@mui/material';
 
 interface Resources {
   wheat: number;
@@ -601,7 +602,7 @@ const Trade: React.FC = () => {
     }
 
     return (
-      <div className="TradeLine" key={`player-${item.name}-${index}`}>
+      <Box className="TradeLine" key={`player-${item.name}-${index}`}>
         <PlayerColor color={item.color} />
         <div className="TradeText">
           {item.self && !isObserver && (
@@ -717,13 +718,13 @@ const Trade: React.FC = () => {
             </Button>
           )}
         </div>
-      </div>
+      </Box>
     );
   });
 
   return (
     <Paper className="Trade">
-      <div className="PlayerList">{tradeElements}</div>
+      <div className="TradeList">{tradeElements}</div>
       {!priv && (
         <div style={{ padding: '0.5rem' }}>
           <b>Read-only: observers can view offers but cannot participate in trades.</b>