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>
-      <AppIcon
-        class="copy-button"
-        icon="copy"
-        @click="copyCode"
-      />
-      <template v-slot:tooltip>
-        Copy
-      </template>
-    </TooltipWrapper>
+    <div class="copy-action-container">
+      <TooltipWrapper>
+        <AppIcon
+          icon="copy"
+          class="copy-button"
+          @click="copyCode"
+        />
+        <template v-slot:tooltip>
+          Copy
+        </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;