Fix mobile views

src/css/App.less

@@ -11,7 +11,8 @@ body {
   background-color: @main-dark;
 }
 
-html, body {
+html,
+body {
   overscroll-behavior-x: none;
 }
 
@@ -172,7 +173,8 @@ select:-webkit-autofill:focus {
     font-size: 2em;
   }
 
-  code, pre {
+  code,
+  pre {
     background-color: @main;
     border-radius: @border-radius-base;
   }
@@ -201,4 +203,8 @@ select:-webkit-autofill:focus {
   &.unlisted {
     opacity: 0.5;
   }
+
+  code {
+    white-space: nowrap;
+  }
 }

src/pages/Hub.tsx

@@ -118,7 +118,11 @@ const Hub = () => {
         <>
           <Title level={5}>{tune.vehicleName}</Title>
           <Space direction="vertical">
-            <Text type="secondary">{tune.author}, {tune.published}</Text>
+            <Text type="secondary">
+              <Link to={generatePath(Routes.USER_ROOT, { userId: tune.author })}>
+                {tune.authorUsername}
+              </Link>, {tune.published}
+            </Text>
             <Text>{tune.engineMake}, {tune.engineCode}, {tune.displacement}, {tune.cylindersCount} cylinders, {tune.aspiration}</Text>
             <Text code>{tune.signature}</Text>
           </Space>

src/pages/User.tsx

@@ -12,6 +12,7 @@ import {
   Divider,
   List,
   Pagination,
+  Space,
   Typography,
 } from 'antd';
 import { ArrowRightOutlined } from '@ant-design/icons';
@@ -77,17 +78,19 @@ const Profile = () => {
             ]}
             className={tune.visibility}
           >
-            <List.Item.Meta
-              title={<>
-                {tune.vehicleName} <Typography.Text code>{tune.signature}</Typography.Text>
-              </>}
-              description={<>
-                {tune.engineMake}, {tune.engineCode}, {tune.displacement}, {tune.aspiration}
-              </>}
-            />
-            <div>
-              <Typography.Text italic>{tune.published}</Typography.Text>
-            </div>
+            <Space direction="vertical">
+              <List.Item.Meta
+                title={<>
+                  {tune.vehicleName} <Typography.Text code>{tune.signature}</Typography.Text>
+                </>}
+                description={<>
+                  {tune.engineMake}, {tune.engineCode}, {tune.displacement}, {tune.aspiration}
+                </>}
+              />
+              <div>
+                <Typography.Text italic>{tune.published}</Typography.Text>
+              </div>
+            </Space>
           </List.Item>
         )}
         footer={

src/pages/auth/Profile.tsx

@@ -212,17 +212,19 @@ const Profile = () => {
                 <Button icon={<ArrowRightOutlined />} onClick={() => navigate(tunePath(tune.tuneId))} />,
               ]}
             >
-              <List.Item.Meta
-                title={<>
-                  {tune.vehicleName} <Typography.Text code>{tune.signature}</Typography.Text>
-                </>}
-                description={<>
-                  {tune.engineMake}, {tune.engineCode}, {tune.displacement}, {tune.aspiration}
-                </>}
-              />
-              <div>
-                <Typography.Text italic>{tune.published}</Typography.Text>
-              </div>
+              <Space direction="vertical">
+                <List.Item.Meta
+                  title={<>
+                    {tune.vehicleName} <Typography.Text code>{tune.signature}</Typography.Text>
+                  </>}
+                  description={<>
+                    {tune.engineMake}, {tune.engineCode}, {tune.displacement}, {tune.aspiration}
+                  </>}
+                />
+                <div>
+                  <Typography.Text italic>{tune.published}</Typography.Text>
+                </div>
+              </Space>
             </List.Item>
           )}
           footer={