diff --git a/frontends/web/react/components/help/help.css b/frontends/web/react/components/help/help.css index 33a52b3600550478f5e3159439e9b34eb137ad90..ae74ede5fa006b995503195a801d418e8b4eaf71 100644 --- a/frontends/web/react/components/help/help.css +++ b/frontends/web/react/components/help/help.css @@ -10,6 +10,11 @@ margin: 10px 0px 4px 0px; } +.help > ul .key-container { + display: inline-block; + min-width: 86px; +} + .help > ul .key { border: 1px solid #ffffff; display: inline-block; diff --git a/frontends/web/react/components/help/help.tsx b/frontends/web/react/components/help/help.tsx index f7511cf9a135bd75f5a0081be1a37bf4e903680e..118e569270472107f675be827679279fa02ae4c2 100644 --- a/frontends/web/react/components/help/help.tsx +++ b/frontends/web/react/components/help/help.tsx @@ -12,29 +12,52 @@ export const Help: FC<HelpProps> = ({ style = [] }) => { <div className={classes()}> <ul> <li> - <span className="key">Enter</span> - Start + <span className="key-container"> + <span className="key">Enter</span> + </span> + Start button </li> <li> - <span className="key">Space</span> - Select + <span className="key-container"> + <span className="key">Space</span> + </span> + Select button </li> <li> - <span className="key">A</span> - A + <span className="key-container"> + <span className="key">A</span> + </span> + A button </li> <li> - <span className="key">S</span> - B + <span className="key-container"> + <span className="key">S</span> + </span> + B button </li> <li> - <span className="key">Escape</span> - Exit fullscreen + <span className="key-container"> + <span className="key">Escape</span> + </span> + Exit fullscreen </li> <li> - <span className="key">Ctrl + D</span> - Turbo speed + <span className="key-container"> + <span className="key">Ctrl + D</span> + </span> + Turbo speed </li> <li> - <span className="key">Ctrl + F</span> - Toggle fullscreen + <span className="key-container"> + <span className="key">Ctrl + F</span> + </span> + Toggle fullscreen </li> <li> - <span className="key">Ctrl + K</span> - Toggle on-screen - keyboard + <span className="key-container"> + <span className="key">Ctrl + K</span> + </span> + Toggle on-screen keyboard </li> </ul> </div>