Commit 190113a7 authored by Dieter Holvoet's avatar Dieter Holvoet Committed by Sascha Eggenberger
Browse files

Issue #3331830: Overflow in the footer of the media library widget modal

parent 6b823d3b

dist/css/components/media_library.css

+20 −5
Original line number Diff line number Diff line
@@ -400,6 +400,10 @@ fieldset.media-library-widget .media-library-edit__link, fieldset.media-library- 
  }

}



.media-library-widget-modal .ui-dialog-buttonpane {

  flex-direction: column;

}



.media-library-widget-modal .ui-dialog-buttonpane .form-actions {

  display: flex;

  flex-direction: row;
@@ -418,6 +422,16 @@ fieldset.media-library-widget .media-library-edit__link, fieldset.media-library- 


.media-library-widget-modal .ui-dialog-buttonpane .media-library-selected-count {

  flex-grow: 1;

  margin-bottom: var(--gin-spacing-s);

}



@media (min-width: 36.75em) {

  .media-library-widget-modal .ui-dialog-buttonpane {

    flex-direction: row;

  }



  .media-library-widget-modal .ui-dialog-buttonpane .media-library-selected-count {

    margin-bottom: 0;

  }



  [dir="ltr"] .media-library-widget-modal .ui-dialog-buttonpane .media-library-selected-count {
@@ -427,6 +441,7 @@ fieldset.media-library-widget .media-library-edit__link, fieldset.media-library- 
  [dir="rtl"] .media-library-widget-modal .ui-dialog-buttonpane .media-library-selected-count {

    margin-right: 0;

  }

}



@media (min-width: 80em) {

  .media-library-selection .media-library-item--grid {

styles/components/media_library.scss

+12 −1
Original line number Diff line number Diff line
@@ -384,6 +384,8 @@ fieldset.media-library-widget { 
}



.media-library-widget-modal .ui-dialog-buttonpane {

  flex-direction: column;



  .form-actions {

    display: flex;

    flex-direction: row;
@@ -398,9 +400,18 @@ fieldset.media-library-widget { 


  .media-library-selected-count {

    flex-grow: 1;

    margin-bottom: var(--gin-spacing-s);

  }



  @include mq(xsmall) {

    flex-direction: row;



    .media-library-selected-count {

      margin-bottom: 0;

      margin-left: 0;

    }

  }

}



.media-library-selection .media-library-item--grid {

  @include mq(wide) {