css: tiles: don't stretch in horizontal list

- center thumbnail if too narrow
- circular fading background
- set white background (for img for images with transparency)

[delivers #89864088]

app/assets/stylesheets/combos/_ui-resources-tiles.sass

@@ -48,6 +48,7 @@
 
   .ui-tile__image
     +dimension(100%,auto)
+    background-color: white // for images with transparency
 
   &.large
     .ui-resources-page-items
@@ -92,18 +93,21 @@
   .ui-tile
     .ui-tile__image
       +dimension(auto, 200px)
+      min-width: auto
 
   &.small
     height: 210px
     .ui-tile
       .ui-tile__image
         +dimension(auto, 125px)
+        min-width: auto
 
   &.large
     height: 385px
     .ui-tile
       .ui-tile__image
         +dimension(auto, 300px)
+        min-width: auto
 /* Layout switching
  *-----------------------------------------
 

app/assets/stylesheets/components/_ui-tiles.sass

@@ -29,6 +29,8 @@
 .ui-tile__body
   line-height: 0
   background-color: rgba(0, 0, 0, 0.3)
+  box-shadow: 0 0 150px hsl(0, 0%, 34%) inset
+  text-align: center // for narrow thumbnails
 
 .ui-tile__head
   +position-top-left(0,0)
@@ -106,6 +108,7 @@
 
 .ui-tile__thumbnail
   display: block
+  vertical-align: middle
 
 .ui-tile__image
   height: 400px