Fix layout issues on mobile screen:

* Move "View Source" button to header when the screen is too narrow and collapse the text;
* Allow buttons on the title screen to wrap.

Author: AlexeyMz

src/components/ViewSource/index.tsx

@@ -12,9 +12,10 @@ export function ViewSource(props: {
   const {target} = props;
   return (
     <Link className={styles.viewSource}
-      to={target}>
+      to={target}
+      title='View source code for the playground page'>
       <CodeIcon width={24} height={24} />
-      View Source
+      <span className={styles.label}>View Source</span>
     </Link>
   );
 }

src/components/ViewSource/styles.module.css

@@ -4,7 +4,7 @@
   position: absolute;
   margin-top: 10px;
   right: 10px;
-  z-index: 100;
+  z-index: 200;
 
   text-decoration: none;
   color: var(--ifm-color-emphasis-600);
@@ -21,3 +21,16 @@
   color: var(--ifm-color-emphasis-600);
   background-color: var(--ifm-color-emphasis-200);
 }
+
+@media (width <= 700px) {
+  .viewSource {
+    margin-top: 14px;
+    top: 0px;
+  }
+}
+
+@media (width <= 400px) {
+  .label {
+    display: none;
+  }
+}

src/pages/index.module.css

@@ -74,6 +74,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-wrap: wrap;
   gap: 15px;
   margin-top: 40px;
   --ifm-button-color: #000;