Fix UI glitches 2025

app/helpers/alchemy/admin/attachments_helper.rb

@@ -15,7 +15,7 @@ def attachment_preview_size(attachment)
         when "application/pdf" then "850x600"
         when *IMAGE_FILE_TYPES then "850x280"
         when *AUDIO_FILE_TYPES then "850x190"
-        when *VIDEO_FILE_TYPES then "900x280"
+        when *VIDEO_FILE_TYPES then "850x240"
         else
           "500x165"
         end

app/helpers/alchemy/admin/base_helper.rb

@@ -21,7 +21,9 @@ module BaseHelper
       def current_alchemy_user_name
         name = current_alchemy_user.try(:alchemy_display_name)
         if name.present?
-          content_tag :span, "#{Alchemy.t("Logged in as")} #{name}", class: "current-user-name"
+          content_tag :span, class: "current-user-name" do
+            "#{render_icon(:user, size: "1x")} #{name}".html_safe
+          end
         end
       end
 

app/stylesheets/alchemy/admin/archive.scss

@@ -256,14 +256,13 @@ div#library_sidebar {
   flex-direction: column;
   position: fixed;
   border-left: 1px solid var(--border-color);
-  top: 0;
+  top: var(--top-menu-height);
   right: 0;
   width: var(--sidebar-width);
   overflow-y: auto;
 
-  padding: calc(var(--top-menu-height) + var(--spacing-2)) var(--spacing-4)
-    var(--spacing-2) var(--spacing-4);
-  height: calc(100% - var(--pagination-height));
+  padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-4);
+  height: calc(100% - var(--top-menu-height) - var(--pagination-height));
   z-index: 3;
   background-color: var(--sidebar-background-color);
 

app/stylesheets/alchemy/admin/elements.scss

@@ -120,7 +120,7 @@ alchemy-tinymce {
   white-space: nowrap;
   transition: color var(--transition-duration);
   line-height: 1.5;
-  max-width: 85%;
+  min-width: 0;
 
   .preview_text_quote {
     overflow: hidden;
@@ -140,16 +140,17 @@ alchemy-tinymce {
 .element-handle {
   position: relative;
   display: inline-flex;
+  flex-shrink: 0;
   width: var(--spacing-4);
   height: var(--spacing-4);
   cursor: move;
-  padding-right: var(--spacing-1);
 }
 
 button.element-toggle {
   width: 20px;
   height: 20px;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   position: relative;
   transition: none;
@@ -208,7 +209,7 @@ button.element-toggle {
       }
 
       .element-toggle {
-        margin-left: var(--spacing-1);
+        margin-left: 0;
       }
 
       .element-hidden-icon {
@@ -462,7 +463,7 @@ button.element-toggle {
 
 .element-header {
   display: flex;
-  gap: var(--spacing-1);
+  gap: var(--spacing-2);
   align-items: center;
   padding: var(--spacing-2);
   background-color: var(--element-header-bg-color);
@@ -514,6 +515,7 @@ button.element-toggle {
 .element-hidden-icon {
   display: none;
   white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .element-toolbar {
@@ -836,7 +838,7 @@ alchemy-publish-element-button {
     align-items: center;
     gap: var(--spacing-1);
     margin: 6px 0 var(--spacing-1);
-    padding: 0 var(--spacing-1) 0 var(--spacing-2);
+    padding: 0 var(--spacing-1);
     border-style: var(--border-style);
     border-width: var(--border-width_small);
     border-color: var(--form-field-border-color);
@@ -850,20 +852,29 @@ alchemy-publish-element-button {
     }
   }
 
-  .file_name {
+  .file_icon {
     display: inline-flex;
-    flex-grow: 1;
-    height: 100%;
     align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--spacing-6);
+    height: var(--spacing-6);
+  }
+
+  .file_name {
     white-space: nowrap;
     overflow: hidden;
+    flex-grow: 1;
     font-size: var(--font-size_small);
     text-overflow: ellipsis;
-    padding: var(--spacing-1);
   }
 
   .remove_file_link {
-    width: 24px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--spacing-6);
     padding: var(--spacing-1);
   }
 }

app/stylesheets/alchemy/admin/forms.scss

@@ -192,9 +192,12 @@ form {
         right: var(--form-field-addon-width);
 
         select {
-          border-right-width: 0;
           border-top-right-radius: 0;
           border-bottom-right-radius: 0;
+
+          &:not(:focus) {
+            border-right-width: 0;
+          }
         }
       }
     }

app/stylesheets/alchemy/admin/frame.scss

@@ -1,5 +1,6 @@
 @use "base";
 @use "navigation";
+@use "../variables" as vars;
 
 alchemy-overlay {
   visibility: hidden;
@@ -59,7 +60,7 @@ div#overlay_text_box {
   display: flex;
   height: var(--header-height);
   background: var(--header-background);
-  border-bottom: var(--header-border-bottom);
+  border-bottom: var(--border-default);
   position: relative;
 
   a:hover {
@@ -68,20 +69,27 @@ div#overlay_text_box {
 
   .page_status_and_name {
     align-items: center;
-    padding: var(--spacing-1) var(--spacing-2);
+    padding: 0 var(--spacing-2);
+    height: 100%;
     background-color: var(--toolbar-bg-color);
     text-shadow: var(--text-shadow-light);
     @extend .disable-user-select;
     @extend .locked_page;
     cursor: default;
     border-bottom-color: var(--toolbar-bg-color);
-  }
 
-  .page_name {
-    margin-right: var(--spacing-1);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    .page_status {
+      &:first-of-type {
+        margin-left: var(--spacing-2);
+      }
+      margin-left: var(--spacing-1);
+      margin-bottom: 0;
+
+      // The lock icon is a bit too high, so we need to adjust it
+      &:last-child {
+        margin-bottom: 1px;
+      }
+    }
   }
 }
 
@@ -99,10 +107,11 @@ div#overlay_text_box {
   display: flex;
   align-items: center;
   height: var(--header-height);
-  padding-left: var(--spacing-2);
   margin-left: auto;
   border-bottom: var(--border-default);
-  background-color: var(--header-background);
+  border-left: var(--border-default);
+  white-space: nowrap;
+  background-color: var(--toolbar-bg-color);
 
   select {
     background-color: transparent;
@@ -112,6 +121,13 @@ div#overlay_text_box {
   }
 
   .current-user-name {
-    padding-right: var(--spacing-2);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-1);
+    padding: 0 var(--spacing-3);
+
+    @media screen and (max-width: vars.$large-screen-break-point) {
+      display: none;
+    }
   }
 }

app/stylesheets/alchemy/admin/navigation.scss

@@ -225,7 +225,10 @@
   display: flex;
   flex-grow: 1;
   flex-wrap: nowrap;
-  height: calc(var(--header-height) + 1px);
+  height: var(--header-height);
+  overflow-x: auto;
+  scrollbar-width: none;
+  scrollbar-gutter: stable;
 
   label {
     float: left;
@@ -250,13 +253,20 @@
   align-items: center;
   flex-wrap: nowrap;
   border-right: var(--border-default);
-  border-bottom: var(--border-default);
+  white-space: nowrap;
+  padding-left: var(--spacing-1);
 
   form {
-    align-self: center;
-    justify-self: flex-end;
+    display: flex;
+    align-content: center;
+    justify-content: center;
     margin-right: var(--spacing-1);
-    line-height: 1;
+
+    button {
+      display: flex;
+      align-content: center;
+      justify-content: center;
+    }
   }
 
   &:hover {
@@ -268,7 +278,7 @@
     display: flex;
     align-items: center;
     cursor: pointer;
-    padding: var(--spacing-1) var(--spacing-2);
+    padding: var(--spacing-1);
 
     &:focus {
       @include mixins.default-focus-style(
@@ -277,22 +287,21 @@
     }
   }
 
-  .icon.close {
-    vertical-align: text-bottom;
-    text-shadow: var(--text-shadow-light);
+  .page_naming_infos {
+    display: flex;
+    align-items: baseline; // Page name, Site name and language code having different font sizes
+    gap: var(--spacing-1);
   }
 
   .page_name {
-    margin-right: var(--spacing-1);
-    text-shadow: var(--text-shadow-light);
+    white-space: nowrap;
+    line-height: 1;
   }
 
   .page_language,
   .page_site {
-    display: inline-block;
     color: var(--text-color-muted);
     font-size: var(--font-size_small);
-    margin-right: var(--spacing-1);
   }
 
   .page_language {

app/stylesheets/alchemy/admin/resource_info.scss

@@ -64,7 +64,10 @@
       min-height: var(--form-field-height);
       background: var(--form-field-background-color);
       border-radius: var(--border-radius_medium);
-      @include mixins.truncate(var(--form-right-column-width), $wrap: nowrap);
+
+      &:not(.value-block) {
+        @include mixins.truncate(var(--form-right-column-width), $wrap: nowrap);
+      }
     }
 
     &.with-icon {

app/stylesheets/alchemy/admin/sitemap.scss

@@ -234,16 +234,6 @@
   }
 }
 
-.page_status_and_name .page_status {
-  margin-left: var(--spacing-1);
-  margin-bottom: -1px;
-
-  // The lock icon is a bit too high, so we need to adjust it
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
 .page_status {
   display: inline-flex;
   justify-content: center;

app/views/alchemy/admin/pages/_locked_page.html.erb

@@ -3,7 +3,7 @@
 <% else %>
   <div class="locked_page wide" id="locked_page_<%= locked_page.id %>">
     <%= link_to alchemy.edit_admin_page_path(locked_page) do %>
-      <%= render 'alchemy/admin/pages/page_infos', page: locked_page, truncate: true %>
+      <%= render 'alchemy/admin/pages/page_infos', page: locked_page %>
     <% end %>
     <%= form_tag(alchemy.unlock_admin_page_path(locked_page), remote: true) do %>
       <button class="icon_button small" title="<%= Alchemy.t(:explain_unlocking) %>">

app/views/alchemy/admin/pages/_page_infos.html.erb

@@ -1,24 +1,18 @@
 <% if page.definition.blank? %>
   <%= page_layout_missing_warning %>
 <% end %>
-<span class="page_name" title="<%= page.name %>">
-  <% if local_assigns[:truncate] %>
-    <%= truncate page.name, length: 15 %>
-  <% else %>
+<div class="page_naming_infos">
+  <span class="page_name" title="<%= page.name %>">
     <%= page.name %>
-  <% end %>
-</span>
-<%- if multi_site? -%>
-  <span class="page_site" title="<%= page.site_name %>">
-    <% if local_assigns[:truncate] %>
-      <%= truncate page.site_name, length: 15 %>
-    <% else %>
-      <%= page.site_name %>
-    <% end %>
-  </span>
-<%- end -%>
-<%- if page.site_languages.many? -%>
-  <span class="page_language" title="<%= page.language.name %>">
-    <%= page.language_code %>
   </span>
-<%- end -%>
+  <%- if multi_site? -%>
+    <span class="page_site" title="<%= page.site_name %>">
+      <%= page.site_name %>
+    </span>
+  <%- end -%>
+  <%- if page.site_languages.many? -%>
+    <span class="page_language" title="<%= page.language.name %>">
+      <%= page.language_code %>
+    </span>
+  <%- end -%>
+</div>

app/views/alchemy/admin/pages/info.html.erb

@@ -19,7 +19,7 @@
   </div>
   <div class="value">
     <label><%= Alchemy.t(:page_status) %></label>
-    <p>
+    <p class="value-block">
       <% if @page.locked? %>
         <span class="page_status">
           <%= render_icon(:edit, size: "1x") %>

spec/helpers/alchemy/admin/attachments_helper_spec.rb

@@ -45,7 +45,7 @@
     context "for an video attachment" do
       let(:mime_type) { "video/mp4" }
 
-      it { is_expected.to eq("900x280") }
+      it { is_expected.to eq("850x240") }
     end
 
     context "for any other file" do