[launcher] Move app id field to top left corner

Author: rschuchmann

css/styles.css

@@ -446,13 +446,21 @@ body:not(.edit-mode-active) .launch-app-box:hover {
   overflow: hidden;
   white-space: nowrap;
 }
+.app-id-position {
+  left: 0;
+  position: absolute;
+  top: 0;
+  margin: 15px;
+  z-index: 2;
+  max-width: 60%;
+}
 .app-version-field {
   right: 0;
   position: absolute;
   top: 0;
   margin: 15px;
   z-index: 2;
-  max-width: 80%;
+  max-width: 30%;
 }
 .app-authors-field {
   right: 0;
@@ -470,7 +478,7 @@ body:not(.edit-mode-active) .launch-app-box:hover {
   max-height: 35px;
 }
 .app-desc {
-  max-height: 65px;
+  max-height: 85px;
 }
 .app-desc.editable {
   overflow: auto;
@@ -487,7 +495,7 @@ body:not(.edit-mode-active) .launch-app-box:hover {
 }
 .app-desc-fixed {
   display: -webkit-box;
-  -webkit-line-clamp: 3;
+  -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
 }
 .sub-header {

renderer/index.js

@@ -734,7 +734,7 @@ $(() => {
                              <label id="appDbPathLabel_${unicodeToHTMLID(app.id)}" class="custom-file-label dbpath" for="appDbPath_${unicodeToHTMLID(app.id)}">${app.dbpath ? escapeHtml(app.dbpath) : escapeHtml(lang.appDbPathPlaceholder)}</label>
                              <small data-id="${unicodeToHTMLID(app.id)}" class="form-text reset-db-path" style="${app.dbpath ? '' : 'display:none'}">${escapeHtml(lang.appDbPathReset)}</small>
                            </div>
-                           <div class="app-id-field" style="display:none;" title="${escapeHtml(app.id)}">
+                           <div class="app-id-field app-id-position" style="display:none;" title="${escapeHtml(app.id)}">
                             <small>ID: <i>${escapeHtml(app.id)}</i></small>
                            </div>
                            ${

server/admin/srcjs/index.js

@@ -530,7 +530,7 @@ function refreshConfigList() {
                 <div style="height:1rem"></div>
               </div>
               <button id="appEnv_${index}" data-id="${idEncoded}" class="btn btn-secondary open-config-btn" style="display:none;" type="button">Advanced Settings</button>
-              <div class="app-id-field" title="${appIdSafe}">
+              <div class="app-id-field app-id-position" title="${appIdSafe}">
                 <small>ID: <i>${appIdSafe}</i></small>
               </div>
               ${(configData.version != null && configData.version !== '') ? `<div class="app-id-field app-version-field" title="${escapeHtml(configData.version)}">

server/admin/www/styles.css

@@ -459,13 +459,21 @@ a:hover {
   overflow: hidden;
   white-space: nowrap;
 }
+.app-id-position {
+  left: 0;
+  position: absolute;
+  top: 0;
+  margin: 15px;
+  z-index: 2;
+  max-width: 60%;
+}
 .app-version-field {
   right: 0;
   position: absolute;
   top: 0;
   margin: 15px;
   z-index: 2;
-  max-width: 80%;
+  max-width: 30%;
 }
 .app-authors-field {
   right: 0;
@@ -483,7 +491,7 @@ a:hover {
   max-height: 35px;
 }
 .app-desc {
-  max-height: 65px;
+  max-height: 85px;
 }
 .app-desc.editable {
   overflow: auto;
@@ -512,7 +520,7 @@ a:hover {
 }
 .app-desc-fixed {
   display: -webkit-box;
-  -webkit-line-clamp: 3;
+  -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
 }
 .sub-header {