Merge pull request #15652 from craftcms/bugfix/cms-15649-image-thumbn…

…ail-background-color

Fix Image thumbnail backgrounds

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Release Notes for Craft CMS 5
 
+## Unreleased
+
+- Fixed a bug where element chips within thumbnail views weren’t getting light gray backgrounds. ([#15649](https://github.com/craftcms/cms/issues/15649))
+
 ## 5.4.0.1 - 2024-09-03
 
 - Fixed a PHP error that could occur on element indexes. ([#15648](https://github.com/craftcms/cms/issues/15648))

src/web/assets/cp/src/css/_main.scss

@@ -2168,17 +2168,21 @@ ul.icons {
   align-items: center;
   border: 1px solid var(--hairline-color);
   border-radius: var(--small-border-radius);
-  padding-block: 0;
-  padding-inline: 9px;
+  padding-block: var(--xs);
+  padding-inline: calc(var(--xs) + 1px);
   cursor: pointer;
   color: var(--medium-text-color);
+  gap: var(--xs);
+  line-height: 1;
 
   .copytextbtn__icon {
+    font-size: calc(12rem / 16);
+    display: inline-flex;
+    justify-content: center;
     padding: 0;
     width: 13px;
+    height: 13px;
     background: none;
-    margin-block-start: -3px;
-    margin-inline-start: 5px;
     color: var(--light-text-color);
   }
 
@@ -2193,8 +2197,8 @@ ul.icons {
   }
 
   &.small {
-    padding-block: 0;
-    padding-inline: 5px;
+    padding-block: 2px;
+    padding-inline: var(--xs);
 
     .copytextbtn__value {
       font-size: calc(11rem / 16);
@@ -3561,8 +3565,6 @@ table {
 
   .chip {
     margin: 0 !important;
-    padding: 0;
-    background-color: transparent;
   }
 }
 
@@ -4194,6 +4196,15 @@ table {
   }
 }
 
+.tableview {
+  .inline-chips {
+    .chip {
+      padding: 0;
+      background-color: transparent;
+    }
+  }
+}
+
 .export-form {
   position: relative;