fix(codecatalyst): very long branch messes up layout #3280

nkomonen-amazon · web-flow · commit 439d74e5343d · 2023-03-27T16:07:45.000-07:00
Problem:
When there was an existing branch with a very long name,
the width of the input box would mess up the UI.

Solution:
Fix how the widths work for the branch selectiong/naming
input boxes.
Fixes IDE-10388

Signed-off-by: Nikolas Komonen &lt;nkomonen@amazon.com&gt;
diff --git a/src/codecatalyst/vue/create/source.vue b/src/codecatalyst/vue/create/source.vue
@@ -265,6 +265,8 @@ export default defineComponent({
 <style scope>
 .picker {
     min-width: 300px;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 .source-pickers {
@@ -315,6 +317,8 @@ body.vscode-light .mode-container[data-disabled='true'] .config-item {
 
 #branch-input {
     min-width: 300px;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 .project-button {

Original file line number	Diff line number	Diff line change
`@@ -265,6 +265,8 @@ export default defineComponent({`
`265`	`265`	`<style scope>`
`266`	`266`	`.picker {`
`267`	`267`	`min-width: 300px;`
	`268`	`+ width: 100%;`
	`269`	`+ box-sizing: border-box;`
`268`	`270`	`}`
`269`	`271`
`270`	`272`	`.source-pickers {`
`@@ -315,6 +317,8 @@ body.vscode-light .mode-container[data-disabled='true'] .config-item {`
`315`	`317`
`316`	`318`	`#branch-input {`
`317`	`319`	`min-width: 300px;`
	`320`	`+ width: 100%;`
	`321`	`+ box-sizing: border-box;`
`318`	`322`	`}`
`319`	`323`
`320`	`324`	`.project-button {`