From 8a20befd0941cb2e6d5e29552606454bd871b092 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Sun, 13 Jun 2021 11:16:21 +0200
Subject: [PATCH] fix(UI): various fixes in displaying content with small
 window size

---
 src/renderer/components/ModalAskParameters.vue     |  7 ++++---
 src/renderer/components/ModalEditSchema.vue        |  3 ++-
 src/renderer/components/ModalFakerRows.vue         |  3 ++-
 src/renderer/components/ModalNewConnection.vue     |  3 ++-
 src/renderer/components/ModalNewSchema.vue         |  3 ++-
 src/renderer/components/ModalNewTableRow.vue       |  3 ++-
 src/renderer/components/ModalProcessesList.vue     |  3 ++-
 src/renderer/components/ModalSettings.vue          |  2 +-
 .../components/WorkspaceExploreBarMiscContext.vue  |  3 ++-
 .../WorkspaceExploreBarSchemaContext.vue           |  3 ++-
 .../components/WorkspaceExploreBarTableContext.vue |  5 +++--
 .../components/WorkspacePropsForeignModal.vue      |  3 ++-
 .../WorkspacePropsFunctionOptionsModal.vue         |  3 ++-
 .../WorkspacePropsFunctionParamsModal.vue          |  3 ++-
 .../components/WorkspacePropsIndexesModal.vue      |  3 ++-
 .../components/WorkspacePropsOptionsModal.vue      |  3 ++-
 .../WorkspacePropsRoutineOptionsModal.vue          |  3 ++-
 .../WorkspacePropsRoutineParamsModal.vue           |  3 ++-
 .../WorkspacePropsSchedulerTimingModal.vue         |  3 ++-
 src/renderer/components/WorkspacePropsTableRow.vue |  3 ++-
 src/renderer/components/WorkspaceQueryTable.vue    |  3 ++-
 src/renderer/components/WorkspaceQueryTableRow.vue |  5 +++--
 src/renderer/i18n/en-US.js                         |  3 ++-
 src/renderer/scss/main.scss                        | 14 ++++++++++++++
 24 files changed, 63 insertions(+), 27 deletions(-)

diff --git a/src/renderer/components/ModalAskParameters.vue b/src/renderer/components/ModalAskParameters.vue
index 59aa6471..e893ddde 100644
--- a/src/renderer/components/ModalAskParameters.vue
+++ b/src/renderer/components/ModalAskParameters.vue
@@ -8,7 +8,8 @@
    >
       <template slot="header">
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-play mr-1" /> {{ $t('word.parameters') }}: {{ localRoutine.name }}
+            <i class="mdi mdi-24px mdi-play mr-1" />
+            <span class="cut-text">{{ $t('word.parameters') }}: {{ localRoutine.name }}</span>
          </div>
       </template>
       <div slot="body">
@@ -19,10 +20,10 @@
                   :key="parameter._id"
                   class="form-group"
                >
-                  <div class="col-3">
+                  <div class="col-4">
                      <label class="form-label">{{ parameter.name }}</label>
                   </div>
-                  <div class="col-9">
+                  <div class="col-8">
                      <div class="input-group">
                         <input
                            :ref="i === 0 ? 'firstInput' : ''"
diff --git a/src/renderer/components/ModalEditSchema.vue b/src/renderer/components/ModalEditSchema.vue
index 02e0b73d..36ece081 100644
--- a/src/renderer/components/ModalEditSchema.vue
+++ b/src/renderer/components/ModalEditSchema.vue
@@ -5,7 +5,8 @@
          <div class="modal-header pl-2">
             <div class="modal-title h6">
                <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-database-edit mr-1" /> {{ $t('message.editSchema') }}
+                  <i class="mdi mdi-24px mdi-database-edit mr-1" />
+                  <span class="cut-text">{{ $t('message.editSchema') }}</span>
                </div>
             </div>
             <a class="btn btn-clear c-hand" @click.stop="closeModal" />
diff --git a/src/renderer/components/ModalFakerRows.vue b/src/renderer/components/ModalFakerRows.vue
index 388c93f0..7f1b9948 100644
--- a/src/renderer/components/ModalFakerRows.vue
+++ b/src/renderer/components/ModalFakerRows.vue
@@ -5,7 +5,8 @@
          <div class="modal-header pl-2">
             <div class="modal-title h6">
                <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-playlist-plus mr-1" /> {{ $t('message.tableFiller') }}
+                  <i class="mdi mdi-24px mdi-playlist-plus mr-1" />
+                  <span class="cut-text">{{ $t('message.tableFiller') }}</span>
                </div>
             </div>
             <a class="btn btn-clear c-hand" @click.stop="closeModal" />
diff --git a/src/renderer/components/ModalNewConnection.vue b/src/renderer/components/ModalNewConnection.vue
index f4602884..9702a414 100644
--- a/src/renderer/components/ModalNewConnection.vue
+++ b/src/renderer/components/ModalNewConnection.vue
@@ -5,7 +5,8 @@
          <div class="modal-header pl-2">
             <div class="modal-title h6">
                <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-server-plus mr-1" /> {{ $t('message.createNewConnection') }}
+                  <i class="mdi mdi-24px mdi-server-plus mr-1" />
+                  <span class="cut-text">{{ $t('message.createNewConnection') }}</span>
                </div>
             </div>
             <a class="btn btn-clear c-hand" @click="closeModal" />
diff --git a/src/renderer/components/ModalNewSchema.vue b/src/renderer/components/ModalNewSchema.vue
index ab31bfe5..48b55196 100644
--- a/src/renderer/components/ModalNewSchema.vue
+++ b/src/renderer/components/ModalNewSchema.vue
@@ -5,7 +5,8 @@
          <div class="modal-header pl-2">
             <div class="modal-title h6">
                <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-database-plus mr-1" /> {{ $t('message.createNewSchema') }}
+                  <i class="mdi mdi-24px mdi-database-plus mr-1" />
+                  <span class="cut-text">{{ $t('message.createNewSchema') }}</span>
                </div>
             </div>
             <a class="btn btn-clear c-hand" @click.stop="closeModal" />
diff --git a/src/renderer/components/ModalNewTableRow.vue b/src/renderer/components/ModalNewTableRow.vue
index 3a68571a..73d3eb40 100644
--- a/src/renderer/components/ModalNewTableRow.vue
+++ b/src/renderer/components/ModalNewTableRow.vue
@@ -5,7 +5,8 @@
          <div class="modal-header pl-2">
             <div class="modal-title h6">
                <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-playlist-plus mr-1" /> {{ $t('message.addNewRow') }}
+                  <i class="mdi mdi-24px mdi-playlist-plus mr-1" />
+                  <span class="cut-text">{{ $t('message.addNewRow') }}</span>
                </div>
             </div>
             <a class="btn btn-clear c-hand" @click.stop="closeModal" />
diff --git a/src/renderer/components/ModalProcessesList.vue b/src/renderer/components/ModalProcessesList.vue
index 475b9a30..b5b02149 100644
--- a/src/renderer/components/ModalProcessesList.vue
+++ b/src/renderer/components/ModalProcessesList.vue
@@ -5,7 +5,8 @@
          <div class="modal-header pl-2">
             <div class="modal-title h6">
                <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-memory mr-1" /> {{ $t('message.processesList') }}: {{ connectionName }}
+                  <i class="mdi mdi-24px mdi-memory mr-1" />
+                  <span class="cut-text">{{ $t('message.processesList') }}: {{ connectionName }}</span>
                </div>
             </div>
             <a class="btn btn-clear c-hand" @click.stop="closeModal" />
diff --git a/src/renderer/components/ModalSettings.vue b/src/renderer/components/ModalSettings.vue
index 5f5c1b9d..9e64d847 100644
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@@ -6,7 +6,7 @@
             <div class="modal-title h6">
                <div class="d-flex">
                   <i class="mdi mdi-24px mdi-cog mr-1" />
-                  {{ $t('word.settings') }}
+                  <span class="cut-text">{{ $t('word.settings') }}</span>
                </div>
             </div>
             <a class="btn btn-clear c-hand" @click="closeModal" />
diff --git a/src/renderer/components/WorkspaceExploreBarMiscContext.vue b/src/renderer/components/WorkspaceExploreBarMiscContext.vue
index 22d6797f..d07a89c4 100644
--- a/src/renderer/components/WorkspaceExploreBarMiscContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarMiscContext.vue
@@ -20,7 +20,8 @@
       >
          <template slot="header">
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-delete mr-1" /> {{ deleteMessage }}
+               <i class="mdi mdi-24px mdi-delete mr-1" />
+               <span class="cut-text">{{ deleteMessage }}</span>
             </div>
          </template>
          <div slot="body">
diff --git a/src/renderer/components/WorkspaceExploreBarSchemaContext.vue b/src/renderer/components/WorkspaceExploreBarSchemaContext.vue
index cad0443a..c553e26f 100644
--- a/src/renderer/components/WorkspaceExploreBarSchemaContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarSchemaContext.vue
@@ -69,7 +69,8 @@
       >
          <template slot="header">
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-database-remove mr-1" /> {{ $t('message.deleteSchema') }}
+               <i class="mdi mdi-24px mdi-database-remove mr-1" />
+               <span class="cut-text">{{ $t('message.deleteSchema') }}</span>
             </div>
          </template>
          <div slot="body">
diff --git a/src/renderer/components/WorkspaceExploreBarTableContext.vue b/src/renderer/components/WorkspaceExploreBarTableContext.vue
index 91ab4a5f..bf82b6b2 100644
--- a/src/renderer/components/WorkspaceExploreBarTableContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarTableContext.vue
@@ -21,7 +21,7 @@
       >
          <template slot="header">
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-table-off mr-1" /> {{ $t('message.emptyTable') }}
+               <i class="mdi mdi-24px mdi-table-off mr-1" /> <span class="cut-text">{{ $t('message.emptyTable') }}</span>
             </div>
          </template>
          <div slot="body">
@@ -37,7 +37,8 @@
       >
          <template slot="header">
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-table-remove mr-1" /> {{ selectedTable.type === 'table' ? $t('message.deleteTable') : $t('message.deleteView') }}
+               <i class="mdi mdi-24px mdi-table-remove mr-1" />
+               <span class="cut-text">{{ selectedTable.type === 'table' ? $t('message.deleteTable') : $t('message.deleteView') }}</span>
             </div>
          </template>
          <div slot="body">
diff --git a/src/renderer/components/WorkspacePropsForeignModal.vue b/src/renderer/components/WorkspacePropsForeignModal.vue
index ef81b370..6c027af0 100644
--- a/src/renderer/components/WorkspacePropsForeignModal.vue
+++ b/src/renderer/components/WorkspacePropsForeignModal.vue
@@ -8,7 +8,8 @@
    >
       <template :slot="'header'">
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-key-link mr-1" /> {{ $t('word.foreignKeys') }} "{{ table }}"
+            <i class="mdi mdi-24px mdi-key-link mr-1" />
+            <span class="cut-text">{{ $t('word.foreignKeys') }} "{{ table }}"</span>
          </div>
       </template>
       <div :slot="'body'">
diff --git a/src/renderer/components/WorkspacePropsFunctionOptionsModal.vue b/src/renderer/components/WorkspacePropsFunctionOptionsModal.vue
index bdaf5672..3feccc1f 100644
--- a/src/renderer/components/WorkspacePropsFunctionOptionsModal.vue
+++ b/src/renderer/components/WorkspacePropsFunctionOptionsModal.vue
@@ -7,7 +7,8 @@
    >
       <template :slot="'header'">
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-cogs mr-1" /> {{ $t('word.options') }} "{{ localOptions.name }}"
+            <i class="mdi mdi-24px mdi-cogs mr-1" />
+            <span class="cut-text">{{ $t('word.options') }} "{{ localOptions.name }}"</span>
          </div>
       </template>
       <div :slot="'body'">
diff --git a/src/renderer/components/WorkspacePropsFunctionParamsModal.vue b/src/renderer/components/WorkspacePropsFunctionParamsModal.vue
index 4ed0079e..d677f756 100644
--- a/src/renderer/components/WorkspacePropsFunctionParamsModal.vue
+++ b/src/renderer/components/WorkspacePropsFunctionParamsModal.vue
@@ -8,7 +8,8 @@
    >
       <template :slot="'header'">
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-dots-horizontal mr-1" /> {{ $t('word.parameters') }} "{{ func }}"
+            <i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
+            <span class="cut-text">{{ $t('word.parameters') }} "{{ func }}"</span>
          </div>
       </template>
       <div :slot="'body'">
diff --git a/src/renderer/components/WorkspacePropsIndexesModal.vue b/src/renderer/components/WorkspacePropsIndexesModal.vue
index 2370cb31..dbb446a1 100644
--- a/src/renderer/components/WorkspacePropsIndexesModal.vue
+++ b/src/renderer/components/WorkspacePropsIndexesModal.vue
@@ -8,7 +8,8 @@
    >
       <template :slot="'header'">
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-key mdi-rotate-45 mr-1" /> {{ $t('word.indexes') }} "{{ table }}"
+            <i class="mdi mdi-24px mdi-key mdi-rotate-45 mr-1" />
+            <span class="cut-text">{{ $t('word.indexes') }} "{{ table }}"</span>
          </div>
       </template>
       <div :slot="'body'">
diff --git a/src/renderer/components/WorkspacePropsOptionsModal.vue b/src/renderer/components/WorkspacePropsOptionsModal.vue
index 27d7ccf0..f0bce107 100644
--- a/src/renderer/components/WorkspacePropsOptionsModal.vue
+++ b/src/renderer/components/WorkspacePropsOptionsModal.vue
@@ -7,7 +7,8 @@
    >
       <template :slot="'header'">
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-cogs mr-1" /> {{ $t('word.options') }} "{{ table }}"
+            <i class="mdi mdi-24px mdi-cogs mr-1" />
+            <span class="cut-text">{{ $t('word.options') }} "{{ table }}"</span>
          </div>
       </template>
       <div :slot="'body'">
diff --git a/src/renderer/components/WorkspacePropsRoutineOptionsModal.vue b/src/renderer/components/WorkspacePropsRoutineOptionsModal.vue
index 6cbe8a73..96be15e7 100644
--- a/src/renderer/components/WorkspacePropsRoutineOptionsModal.vue
+++ b/src/renderer/components/WorkspacePropsRoutineOptionsModal.vue
@@ -7,7 +7,8 @@
    >
       <template :slot="'header'">
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-cogs mr-1" /> {{ $t('word.options') }} "{{ localOptions.name }}"
+            <i class="mdi mdi-24px mdi-cogs mr-1" />
+            <span class="cut-text">{{ $t('word.options') }} "{{ localOptions.name }}"</span>
          </div>
       </template>
       <div :slot="'body'">
diff --git a/src/renderer/components/WorkspacePropsRoutineParamsModal.vue b/src/renderer/components/WorkspacePropsRoutineParamsModal.vue
index da2ada39..4913ef3a 100644
--- a/src/renderer/components/WorkspacePropsRoutineParamsModal.vue
+++ b/src/renderer/components/WorkspacePropsRoutineParamsModal.vue
@@ -8,7 +8,8 @@
    >
       <template :slot="'header'">
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-dots-horizontal mr-1" /> {{ $t('word.parameters') }} "{{ routine }}"
+            <i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
+            <span class="cut-text">{{ $t('word.parameters') }} "{{ routine }}"</span>
          </div>
       </template>
       <div :slot="'body'">
diff --git a/src/renderer/components/WorkspacePropsSchedulerTimingModal.vue b/src/renderer/components/WorkspacePropsSchedulerTimingModal.vue
index 82162a2f..0693b9d6 100644
--- a/src/renderer/components/WorkspacePropsSchedulerTimingModal.vue
+++ b/src/renderer/components/WorkspacePropsSchedulerTimingModal.vue
@@ -7,7 +7,8 @@
    >
       <template :slot="'header'">
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-timer mr-1" /> {{ $t('word.timing') }} "{{ localOptions.name }}"
+            <i class="mdi mdi-24px mdi-timer mr-1" />
+            <span class="cut-text">{{ $t('word.timing') }} "{{ localOptions.name }}"</span>
          </div>
       </template>
       <div :slot="'body'">
diff --git a/src/renderer/components/WorkspacePropsTableRow.vue b/src/renderer/components/WorkspacePropsTableRow.vue
index 8a8e19c2..05cd4ef4 100644
--- a/src/renderer/components/WorkspacePropsTableRow.vue
+++ b/src/renderer/components/WorkspacePropsTableRow.vue
@@ -232,7 +232,8 @@
       >
          <template :slot="'header'">
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-playlist-edit mr-1" /> {{ $t('word.default') }} "{{ row.name }}"
+               <i class="mdi mdi-24px mdi-playlist-edit mr-1" />
+               <span class="cut-text">{{ $t('word.default') }} "{{ row.name }}"</span>
             </div>
          </template>
          <div :slot="'body'">
diff --git a/src/renderer/components/WorkspaceQueryTable.vue b/src/renderer/components/WorkspaceQueryTable.vue
index 4ec477bc..d268b9f8 100644
--- a/src/renderer/components/WorkspaceQueryTable.vue
+++ b/src/renderer/components/WorkspaceQueryTable.vue
@@ -85,7 +85,8 @@
       >
          <template :slot="'header'">
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-delete mr-1" /> {{ $tc('message.deleteRows', selectedRows.length) }}
+               <i class="mdi mdi-24px mdi-delete mr-1" />
+               <span class="cut-text">{{ $tc('message.deleteRows', selectedRows.length) }}</span>
             </div>
          </template>
          <div :slot="'body'">
diff --git a/src/renderer/components/WorkspaceQueryTableRow.vue b/src/renderer/components/WorkspaceQueryTableRow.vue
index a7efacac..03c3b493 100644
--- a/src/renderer/components/WorkspaceQueryTableRow.vue
+++ b/src/renderer/components/WorkspaceQueryTableRow.vue
@@ -74,7 +74,7 @@
       >
          <template :slot="'header'">
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-playlist-edit mr-1" /> {{ $t('word.edit') }} "{{ editingField }}"
+               <i class="mdi mdi-24px mdi-playlist-edit mr-1" /> <span class="cut-text">{{ $t('word.edit') }} "{{ editingField }}"</span>
             </div>
          </template>
          <div :slot="'body'">
@@ -138,7 +138,8 @@
       >
          <template :slot="'header'">
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-playlist-edit mr-1" /> {{ $t('word.edit') }} "{{ editingField }}"
+               <i class="mdi mdi-24px mdi-playlist-edit mr-1" />
+               <span class="cut-text">{{ $t('word.edit') }} "{{ editingField }}"</span>
             </div>
          </template>
          <div :slot="'body'">
diff --git a/src/renderer/i18n/en-US.js b/src/renderer/i18n/en-US.js
index 005eb649..a2e5aa85 100644
--- a/src/renderer/i18n/en-US.js
+++ b/src/renderer/i18n/en-US.js
@@ -105,7 +105,8 @@ module.exports = {
       scratchpad: 'Scratchpad',
       array: 'Array',
       changelog: 'Changelog',
-      format: 'Format'
+      format: 'Format',
+      structure: 'Structure'
    },
    message: {
       appWelcome: 'Welcome to Antares SQL Client!',
diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss
index b39a2b42..a0a748f8 100644
--- a/src/renderer/scss/main.scss
+++ b/src/renderer/scss/main.scss
@@ -40,6 +40,12 @@ body {
   box-shadow: none !important;
 }
 
+.cut-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .workspace-tabs {
   align-content: baseline;
 
@@ -112,6 +118,10 @@ body {
       justify-content: space-between;
       align-items: center;
       border-radius: 3px 3px 0 0;
+
+      .modal-title {
+        overflow: hidden;
+      }
     }
   }
 }
@@ -185,6 +195,10 @@ body {
   max-height: 5000rem !important;
 }
 
+.btn-group {
+  flex-wrap: nowrap;
+}
+
 .btn.loading {
   > .mdi,
   > span {