#ObjectListWidgetImagesContainer {
  /* 
  This sets the width of the left column of the content grid, 
  where we're putting our object list widget, to 30%.
  */
  --ajs-content-grid-column-1: 20%;
}

#MyObjectListWidgetImages {
  height: calc(100% - 2px);
}

#MyObjectListWidgetImages .ajs-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* padding: 0px 5px 0 5px; */
  height: -webkit-fill-available;
  overflow: auto;
}

#MyObjectListWidgetImages .ajs-scroll-content {
  /* padding: 0 5px; */
  height: -webkit-fill-available;
  /*
  These flex properties set the buttons to the full
  width of the column, one per line. If you'd prefer
  buttons to wrap, comment these lines.
  */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
}

#MyObjectListWidgetImages button {
  /* using these flex properties centers text in buttons */
  display: flex;
  justify-content: center;
  /* if buttons have images, this will show text then image */
  flex-direction: column;
  /* to reverse it to image then text, use this instead */
  /* flex-direction: column-reverse; */
}

#MyObjectListWidgetImages .ajs-widget-button {
  display: flex;
  flex-direction: column;
}