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.
This commit is contained in:
undergroundwires
2023-11-13 19:02:14 +01:00
parent 949fac1a7c
commit bd383ed273
4 changed files with 48 additions and 38 deletions

View File

@@ -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/>'
,
},
}))