Changes based on MR discussion for styling issues40042-resizable-file-list-and-commit-panel

3 files changed, 10 insertions, 7 deletions

diff --git a/app/assets/javascripts/ide/components/ide_context_bar.vue b/app/assets/javascripts/ide/components/ide_context_bar.vue
index 0debe82faa3..78c01272af6 100644
--- a/app/assets/javascripts/ide/components/ide_context_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_context_bar.vue
@@ -26,7 +26,7 @@ export default {
       return this.rightPanelCollapsed ? 'angle-double-left' : 'angle-double-right';
     },
     maxSize() {
-      return screen.width / 2;
+      return window.innerWidth / 2;
     },
     panelStyle() {
       if (!this.rightPanelCollapsed) {
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index 273a81c3a6d..269f300a04d 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -24,7 +24,7 @@ export default {
       return this.leftPanelCollapsed ? 'angle-double-right' : 'angle-double-left';
     },
     maxSize() {
-      return screen.width / 2;
+      return window.innerWidth / 2;
     },
     panelStyle() {
       if (!this.leftPanelCollapsed) {
diff --git a/app/assets/javascripts/vue_shared/components/panel_resizer.vue b/app/assets/javascripts/vue_shared/components/panel_resizer.vue
index 7285f46484e..4371534d345 100644
--- a/app/assets/javascripts/vue_shared/components/panel_resizer.vue
+++ b/app/assets/javascripts/vue_shared/components/panel_resizer.vue
@@ -1,10 +1,5 @@
 <script>
 export default {
-  data() {
-    return {
-      size: this.startSize,
-    };
-  },
   props: {
     startSize: {
       type: Number,
@@ -16,17 +11,25 @@ export default {
     },
     minSize: {
       type: Number,
+      required: false,
       default: 0,
     },
     maxSize: {
       type: Number,
+      required: false,
       default: Number.MAX_VALUE,
     },
     enabled: {
       type: Boolean,
+      required: false,
       default: true,
     },
   },
+  data() {
+    return {
+      size: this.startSize,
+    };
+  },
   computed: {
     className() {
       return `drag${this.side}`;