Fix mobile view and icon on install section (#71)

Co-authored-by: Paulo Valim <[email protected]>

src/partials/install_instructions.html

@@ -2,16 +2,18 @@
   <div class="mt-4 w-full p-4 rounded-2xl bg-white">
     <img src="/images/window_buttons.png" alt="" width="36" height="8" />
     <div
-      class="py-10 px-5 flex maxsm:flex-col flex-wrap md:flex-nowrap justify-center"
+      class="py-10 xs:px-5 flex maxsm:flex-col flex-wrap md:flex-nowrap justify-center"
     >
       <!-- desktop app -->
       <div class="md:border-r md:pr-16">
         <div class="flex flex-nowrap">
-          <img class="self-center" src="/images/desktop_download.svg" />
-          <div class="self-center px-5 text-gray-700">
-            <h2 class="font-semibold tracking-wide">
-              Run on your machine
-            </h2>
+          <div
+            class="flex justify-center self-center bg-blue-200 w-[60px] h-[60px] rounded-xl"
+          >
+            <img class="w-6" src="/images/desktop_download.svg" />
+          </div>
+          <div class="self-center pl-5 xs:px-5 text-gray-700">
+            <h2 class="font-semibold tracking-wide">Run on your machine</h2>
             <h3>with Livebook Desktop</h3>
           </div>
         </div>
@@ -42,9 +44,13 @@ <h3>with Livebook Desktop</h3>
 
       <!-- Run on the Cloud -->
       <div class="flex flex-col md:items-start md:ml-14 maxsm:mt-16">
-        <div class="flex flex-nowrap min-w-[270px]">
-          <img class="self-center" src="/images/run_on_cloud.png" />
-          <div class="self-center px-5 text-gray-700">
+        <div class="flex flex-nowrap">
+          <div
+            class="flex justify-center self-center bg-blue-200 w-[60px] h-[60px] rounded-xl"
+          >
+            <img class="w-6" src="/images/run_on_cloud.svg" />
+          </div>
+          <div class="self-center pl-5 xs:px-5 text-gray-700">
             <h2 class="font-semibold tracking-wide">Run in the cloud</h2>
             <h3>on select platforms</h3>
           </div>