Merge pull request #15049 from craftcms/bugfix/15040-inline-editing-s…

…tyles

Bugfix/15040 inline editing styles

CHANGELOG.md

@@ -20,6 +20,7 @@
 - Fixed a “User not authorized to create this element.” error that could occur when creating a new entry within a Matrix field, if the field had Max Entries set. ([#15015](https://github.com/craftcms/cms/issues/15015))
 - Fixed a bug where nested entries weren’t showing up within Matrix fields set to the element index view mode, when viewing entry revisions. ([#15038](https://github.com/craftcms/cms/pull/15038))
 - Fixed the styling of element chips displayed within an element card. ([#15044](https://github.com/craftcms/cms/issues/15044))
+- Fixed styling issues with inline-editing within element indexes. ([#15040](https://github.com/craftcms/cms/issues/15040), [#15049](https://github.com/craftcms/cms/pull/15049))
 
 ## 5.1.4 - 2024-05-17
 

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

@@ -3577,6 +3577,32 @@ table {
     .source-path {
       margin: -22px calc(var(--padding) * -1 + 2px) 24px;
     }
+
+    .inline-editing {
+      textarea,
+      input[type='email'],
+      input[type='text'].fullwidth,
+      input[type='url'] {
+        min-width: 10rem;
+      }
+
+      .money-container input[type='text'].fullwidth,
+      input[type='text'][inputmode].fullwidth {
+        min-width: 5rem;
+      }
+
+      .lightswitch-outer-container .lightswitch-inner-container span {
+        overflow: initial;
+      }
+
+      .selectize.select:not(.fullwidth) {
+        width: 10rem;
+      }
+
+      .flex:has(input[type='text'][inputmode].fullwidth) {
+        flex-wrap: nowrap;
+      }
+    }
   }
 
   .elementselectormodal & {

src/web/assets/cp/src/js/TableElementIndexView.js

@@ -172,7 +172,9 @@ Craft.TableElementIndexView = Craft.BaseElementIndexView.extend({
 
             Craft.cp.displaySuccess(Craft.t('app', 'Changes saved.'));
             this.elementIndex.inlineEditing = false;
-            this.elementIndex.updateElements(true, false);
+            this.elementIndex.updateElements(true, false).then(() => {
+              this.elementIndex.$elements.removeClass('inline-editing');
+            });
           })
           .catch(() => {
             this.elementIndex.setIndexAvailable();
@@ -186,7 +188,9 @@ Craft.TableElementIndexView = Craft.BaseElementIndexView.extend({
       this.addListener(this.$cancelBtn, 'activate', () => {
         this.$cancelBtn.addClass('loading');
         this.elementIndex.inlineEditing = false;
-        this.elementIndex.updateElements(true, false);
+        this.elementIndex.updateElements(true, false).then(() => {
+          this.elementIndex.$elements.removeClass('inline-editing');
+        });
       });
 
       this.addListener(this.$elementContainer, 'keydown', (event) => {
@@ -214,7 +218,9 @@ Craft.TableElementIndexView = Craft.BaseElementIndexView.extend({
       this.addListener(this.$editBtn, 'activate', () => {
         this.$editBtn.addClass('loading');
         this.elementIndex.inlineEditing = true;
-        this.elementIndex.updateElements(true, false);
+        this.elementIndex.updateElements(true, false).then(() => {
+          this.elementIndex.$elements.addClass('inline-editing');
+        });
       });
     }
   },

src/web/assets/cp/src/js/TagSelectInput.js

@@ -147,6 +147,9 @@ Craft.TagSelectInput = Craft.BaseElementSelectInput.extend(
     },
 
     getElementSortAxis: function () {
+      if (this.$container.parents('.inline-editing').length == 1) {
+        return 'y';
+      }
       return 'x';
     },