[IMP] runbot: limited height on tiles

runbot/static/src/css/runbot.scss

@@ -228,3 +228,28 @@ body, .table{
         padding: 0;
     }
 }
+.limited-height {
+    max-height: 180px;
+    overflow: scroll;
+
+    >hr {
+        margin: 2px 0px;
+    }
+    &:before {
+        content:'';
+        width:100%;
+        height:30px;
+        position:absolute;
+        left:0;
+        bottom:0;
+        background:linear-gradient(transparent 0px, white 27px);
+    }
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+.limited-height::-webkit-scrollbar {
+    display: none;
+}
+.limited-height-toggle:hover {
+    background-color: #DDD;
+}

runbot/templates/dashboard.xml

@@ -185,12 +185,12 @@
     </template>
 
     <template id="runbot.default_dashboard_tile_view">
-      <div class="col-sm-3">
+      <div class="col-md-3 col-lg-2 p-2">
         <div class="card">
-          <div class="card-header">
-            <t t-esc="tile.display_name"/>
+          <div class="card-header limited-height-toggle" t-attf-onclick="$('#tile_{{tile.id}}').toggleClass('limited-height')">
+            <t t-esc="tile.display_name"/> <t t-if="tile.build_ids"> (<t t-esc="len(tile.build_ids)"/>)</t>
           </div>
-          <div class="card-body">
+          <div class="card-body limited-height" t-attf-id="tile_{{tile.id}}">
             <p t-if="not tile.build_ids" class="text-success my-0">No build found 👍</p>
             <t t-foreach="tile.sticky_bundle_ids.sorted(lambda b: b.version_id.number, reverse=True)" t-as="bundle">
               <t t-set="failed_builds" t-value="tile.build_ids.filtered(lambda b: b.top_parent.slot_ids.batch_id.bundle_id == bundle)"/>
@@ -201,6 +201,7 @@
                   </a>
               </p>
             </t>
+            <hr/>
           </div>
         </div>
       </div>