Fix UI issues on Linux #207
Conversation
There was a problem hiding this comment.
Pull request overview
This PR fixes UI layout issues on Linux by standardizing spacing and layout patterns across three Vue component files. The changes replace inconsistent margin-based spacing with Tailwind's modern gap utility and simplify wrapper element styling.
Key Changes:
- Replaced
flex-grow mr-3pattern withw-fullon inputs andgap-3on parent containers in SSHConnectView and KubectlConnectView - Removed unnecessary wrapper styling (
w-10 flex justify-center) in DockerView to simplify the layout
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/renderer/views/SSHConnectView.vue | Updated form layout to use gap-3 spacing and w-full input sizing instead of flex-grow mr-3 |
| src/renderer/views/KubectlConnectView.vue | Applied same layout improvements as SSHConnectView for consistency |
| src/renderer/views/DockerView.vue | Removed redundant wrapper div styling, simplifying the button container markup |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div>Name</div> | ||
| <div class="flex items-center justify-between"> | ||
| <TextInput class="flex-grow mr-3" id="name" v-model="form.name" placeholder="production-server" /> | ||
| <div class="flex gap-3 items-center justify-between"> |
There was a problem hiding this comment.
The combination of gap-3 and justify-between on the same flex container may cause unexpected spacing behavior. The w-full class on the TextInput child combined with justify-between on the parent could lead to layout issues. Consider removing justify-between to match the pattern used in DockerView.vue (lines 170, 197), where only flex gap-3 items-center is used without justify-between.
| <div class="flex gap-3 items-center justify-between"> | |
| <div class="flex gap-3 items-center"> |
| <div>Name</div> | ||
| <div class="flex items-center justify-between"> | ||
| <TextInput class="flex-grow mr-3" id="name" v-model="form.name" placeholder="production-server" /> | ||
| <div class="flex gap-3 items-center justify-between"> |
There was a problem hiding this comment.
The combination of gap-3 and justify-between on the same flex container may cause unexpected spacing behavior. The w-full class on the TextInput child combined with justify-between on the parent could lead to layout issues. Consider removing justify-between to match the pattern used in DockerView.vue (lines 170, 197), where only flex gap-3 items-center is used without justify-between.
| <div class="flex gap-3 items-center justify-between"> | |
| <div class="flex gap-3 items-center"> |
No description provided.