diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index 2480f215..5b8e7061 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -854,6 +854,11 @@ const MessageInner = as<'div', MessageProps>(
     const dot = useDotColor(room, mEvent, layout !== 'channel', hideReadReceipts);
     const screenSize = useScreenSizeContext();
     const isMobile = screenSize === ScreenSize.Mobile;
+    // Touch-friendly action-rail sizing — one step larger on mobile so the hover
+    // rail is comfortable under a finger (desktop stays compact for the mouse).
+    const railBtnSize = isMobile ? '400' : '300';
+    const railIconSize = isMobile ? '200' : '100';
+    const railGap = isMobile ? '200' : '100';
 
     // msgType comes from the parent — RoomTimeline reads
     // `mEvent.getContent().msgtype` synchronously and re-evaluates inside
@@ -977,7 +982,7 @@ const MessageInner = as<'div', MessageProps>(
         {!edit && (hover || !!menuAnchor || !!emojiBoardAnchor) && (
           <div className={css.MessageOptionsBase}>
             <Menu className={css.MessageOptionsBar} variant="SurfaceVariant">
-              <Box gap="100">
+              <Box gap={railGap}>
                 {canSendReaction && (
                   <PopOut
                     position="Bottom"
@@ -1008,11 +1013,11 @@ const MessageInner = as<'div', MessageProps>(
                     <IconButton
                       onClick={handleOpenEmojiBoard}
                       variant="SurfaceVariant"
-                      size="300"
+                      size={railBtnSize}
                       radii="300"
                       aria-pressed={!!emojiBoardAnchor}
                     >
-                      <Icon src={RailIcons.Smile} size="100" />
+                      <Icon src={RailIcons.Smile} size={railIconSize} />
                     </IconButton>
                   </PopOut>
                 )}
@@ -1021,10 +1026,10 @@ const MessageInner = as<'div', MessageProps>(
                     onClick={onReplyClick}
                     data-event-id={mEvent.getId()}
                     variant="SurfaceVariant"
-                    size="300"
+                    size={railBtnSize}
                     radii="300"
                   >
-                    <Icon src={RailIcons.Reply} size="100" />
+                    <Icon src={RailIcons.Reply} size={railIconSize} />
                   </IconButton>
                 )}
                 {!isThreadReply && !hideThreadReplyAffordance && (
@@ -1032,20 +1037,20 @@ const MessageInner = as<'div', MessageProps>(
                     onClick={(ev: Parameters<typeof onReplyClick>[0]) => onReplyClick(ev, true)}
                     data-event-id={mEvent.getId()}
                     variant="SurfaceVariant"
-                    size="300"
+                    size={railBtnSize}
                     radii="300"
                   >
-                    <Icon src={RailIcons.Thread} size="100" />
+                    <Icon src={RailIcons.Thread} size={railIconSize} />
                   </IconButton>
                 )}
                 {canEditEvent(mx, mEvent) && onEditId && (
                   <IconButton
                     onClick={() => onEditId(mEvent.getId())}
                     variant="SurfaceVariant"
-                    size="300"
+                    size={railBtnSize}
                     radii="300"
                   >
-                    <Icon src={RailIcons.Edit} size="100" />
+                    <Icon src={RailIcons.Edit} size={railIconSize} />
                   </IconButton>
                 )}
                 <PopOut
@@ -1209,12 +1214,12 @@ const MessageInner = as<'div', MessageProps>(
                 >
                   <IconButton
                     variant="SurfaceVariant"
-                    size="300"
+                    size={railBtnSize}
                     radii="300"
                     onClick={handleOpenMenu}
                     aria-pressed={!!menuAnchor}
                   >
-                    <Icon src={RailIcons.More} size="100" />
+                    <Icon src={RailIcons.More} size={railIconSize} />
                   </IconButton>
                 </PopOut>
               </Box>
@@ -1449,6 +1454,12 @@ export const Event = as<'div', EventProps>(
     const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
     const [menuAnchor, setMenuAnchor] = useState<RectCords>();
     const stateEvent = typeof mEvent.getStateKey() === 'string';
+    // Touch-friendly action-rail sizing — mirrors MessageInner so the system/
+    // state-event rail also reads comfortably under a finger on mobile.
+    const isMobile = useScreenSizeContext() === ScreenSize.Mobile;
+    const railBtnSize = isMobile ? '400' : '300';
+    const railIconSize = isMobile ? '200' : '100';
+    const railGap = isMobile ? '200' : '100';
 
     const handleContextMenu: MouseEventHandler<HTMLDivElement> = (evt) => {
       if (evt.altKey || !window.getSelection()?.isCollapsed) return;
@@ -1488,7 +1499,7 @@ export const Event = as<'div', EventProps>(
         {(hover || !!menuAnchor) && (
           <div className={css.MessageOptionsBase}>
             <Menu className={css.MessageOptionsBar} variant="SurfaceVariant">
-              <Box gap="100">
+              <Box gap={railGap}>
                 <PopOut
                   anchor={menuAnchor}
                   position="Bottom"
@@ -1551,12 +1562,12 @@ export const Event = as<'div', EventProps>(
                 >
                   <IconButton
                     variant="SurfaceVariant"
-                    size="300"
+                    size={railBtnSize}
                     radii="300"
                     onClick={handleOpenMenu}
                     aria-pressed={!!menuAnchor}
                   >
-                    <Icon src={RailIcons.More} size="100" />
+                    <Icon src={RailIcons.More} size={railIconSize} />
                   </IconButton>
                 </PopOut>
               </Box>