Improve styles of extension blocks

f5088b398f0e192f7c4098eda75ff183affb8692

Cohee <18619528+Cohee1207@users.noreply.github.com>

public/css/extensions-panel.css+14 -4 Viewed

 .extensions_info .extension_block {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
-    padding: 5px 10px;
+    padding: 5px;
     margin-bottom: 5px;
     border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 10px;
-    align-items: center;
+    align-items: baseline;
     justify-content: space-between;
     gap: 5px;
+}

     opacity: 0.8;
     font-size: 0.8em;
     font-weight: normal;
-    margin-left: 5px;
+    margin-left: 2px;
+}
 .extensions_info .extension_block a {

 #extensionsMenu>div.extension_container:empty {
     display: none;
+}
+.extensions_info .extension_text_block {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.extensions_info .extension_actions {
+    flex-wrap: nowrap;
+}

public/scripts/extensions.js+5 -5 Viewed

         const type = getExtensionType(name);
         switch (type) {
             case 'global':
-                return '<i class="fa-fw fa-solid fa-server" data-i18n="[title]ext_type_global" title="This is a global extension, available for all users."></i>';
+                return '<i class="fa-sm fa-fw fa-solid fa-server" data-i18n="[title]ext_type_global" title="This is a global extension, available for all users."></i>';
             case 'local':
-                return '<i class="fa-fw fa-solid fa-user" data-i18n="[title]ext_type_local" title="This is a local extension, available only for you."></i>';
+                return '<i class="fa-sm fa-fw fa-solid fa-user" data-i18n="[title]ext_type_local" title="This is a local extension, available only for you."></i>';
             case 'system':
-                return '<i class="fa-fw fa-solid fa-cog" data-i18n="[title]ext_type_system" title="This is a built-in extension. It cannot be deleted and updates with the app."></i>';
+                return '<i class="fa-sm fa-fw fa-solid fa-cog" data-i18n="[title]ext_type_system" title="This is a built-in extension. It cannot be deleted and updates with the app."></i>';
             default:
-                return '<i class="fa-fw fa-solid fa-question" title="Unknown extension type."></i>';
+                return '<i class="fa-sm fa-fw fa-solid fa-question" title="Unknown extension type."></i>';
+        }
+    }

             <div class="extension_icon">
                 ${extensionIcon}
             </div>
-            <div class="flexGrow">
+            <div class="flexGrow extension_text_block">
                 ${originHtml}
                 <span class="${isActive ? 'extension_enabled' : isDisabled ? 'extension_disabled' : 'extension_missing'}">
                     <span class="extension_name">${DOMPurify.sanitize(displayName)}</span>