Fix icon tooltip alignment on instructions modal

This commit fixes a UI misalignment issue for toolips in the download
instructions modal.

The existing margin on icons caused tooltips to be misaligned upon hover
or touch.

Changes include:

- Introduce wrapper elements to encapsulate the margin, ensuring
  tooltips align with the corresponding icons.
- Extract the information incon into a separate Vue component to adhere
  to the single-responsibility principle and improve maintainability.
- Remove redundant newline at the end of 'Open terminal' tooltip to
  reduce the visual clutter.

src/presentation/components/Code/CodeButtons/Save/Instructions/CodeInstruction.vue

@@ -2,16 +2,18 @@
   <span class="code-wrapper">
     <span class="dollar">$</span>
     <code ref="codeElement"><slot /></code>
-    <TooltipWrapper>
+    <div class="copy-action-container">
-      <AppIcon
+      <TooltipWrapper>
-        class="copy-button"
+        <AppIcon
-        icon="copy"
+          icon="copy"
-        @click="copyCode"
+          class="copy-button"
-      />
+          @click="copyCode"
-      <template v-slot:tooltip>
+        />
-        Copy
+        <template v-slot:tooltip>
-      </template>
+          Copy
-    </TooltipWrapper>
+        </template>
+      </TooltipWrapper>
+    </div>
   </span>
 </template>
 
@@ -68,8 +70,10 @@ export default defineComponent({
     font-size: 0.8rem;
     user-select: none;
   }
-  .copy-button {
+  .copy-action-container {
     margin-left: 1rem;
+  }
+  .copy-button {
     @include clickable;
     @include hover-or-touch {
       color: $color-primary;

src/presentation/components/Code/CodeButtons/Save/Instructions/Data/LinuxInstructionsBuilder.ts

@@ -27,7 +27,6 @@ export class LinuxInstructionsBuilder extends InstructionsBuilder {
             + '<li><code>Alt-T</code>: Parrot OS…</li>'
             + '<li><code>Ctrl-Alt-Insert</code>: Bodhi Linux…</li>'
             + '</ul>'
-            + '<br/>'
           ,
         },
       }))

src/presentation/components/Code/CodeButtons/Save/Instructions/InfoTooltip.vue

@@ -0,0 +1,21 @@
+<template>
+  <TooltipWrapper>
+    <AppIcon icon="circle-info" />
+    <template v-slot:tooltip>
+      <slot />
+    </template>
+  </TooltipWrapper>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
+
+export default defineComponent({
+  components: {
+    TooltipWrapper,
+    AppIcon,
+  },
+});
+</script>

src/presentation/components/Code/CodeButtons/Save/Instructions/InstructionList.vue

@@ -13,8 +13,8 @@
     <hr />
     <p>
       <strong>2. The hard (manual) alternative</strong>. This requires you to do additional manual
-      steps. If you are unsure how to follow the instructions, hover on information
+      steps. If you are unsure how to follow the instructions, tap or hover on information
-      (<AppIcon icon="circle-info" />)
+      (<InfoTooltip>Engage with icons like this for extra wisdom!</InfoTooltip>)
       icons near the steps, or follow the easy alternative described above.
     </p>
     <p>
@@ -26,27 +26,15 @@
         >
           <div class="step__action">
             <span>{{ step.action.instruction }}</span>
-            <TooltipWrapper v-if="step.action.details">
+            <div class="details-container" v-if="step.action.details">
-              <AppIcon
+              <InfoTooltip><div v-html="step.action.details" /></InfoTooltip>
-                class="explanation"
+            </div>
-                icon="circle-info"
-              />
-              <template v-slot:tooltip>
-                <div v-html="step.action.details" />
-              </template>
-            </TooltipWrapper>
           </div>
           <div v-if="step.code" class="step__code">
             <CodeInstruction>{{ step.code.instruction }}</CodeInstruction>
-            <TooltipWrapper v-if="step.code.details">
+            <div class="details-container" v-if="step.code.details">
-              <AppIcon
+              <InfoTooltip><div v-html="step.code.details" /></InfoTooltip>
-                class="explanation"
+            </div>
-                icon="circle-info"
-              />
-              <template v-slot:tooltip>
-                <div v-html="step.code.details" />
-              </template>
-            </TooltipWrapper>
           </div>
         </li>
       </ol>
@@ -60,16 +48,14 @@ import {
 } from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import { OperatingSystem } from '@/domain/OperatingSystem';
-import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
-import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 import CodeInstruction from './CodeInstruction.vue';
 import { IInstructionListData } from './InstructionListData';
+import InfoTooltip from './InfoTooltip.vue';
 
 export default defineComponent({
   components: {
     CodeInstruction,
-    TooltipWrapper,
+    InfoTooltip,
-    AppIcon,
   },
   props: {
     data: {
@@ -125,7 +111,7 @@ function renderOsName(os: OperatingSystem): string {
     margin-top: 0.5em;
   }
 }
-.explanation {
+.details-container {
-    margin-left: 0.5em;
+  margin-left: 0.5em; // Do not style icon itself to ensure correct tooltip alignment
 }
 </style>