Make Garden-o-matic at least readable on mobile devices

Tools/GardeningServer/styles/notifications.css

 /*
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
  *    notice, this list of conditions and the following disclaimer in the
  *    documentation and/or other materials provided with the distribution.
  *
  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /* FIXME: This should really be in actions.css. */
-ul.actions>li {
+ul.actions > li {
     display: inline-block;
 }
 
 ol.notifications {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 ol.notifications ul {
     list-style: none;
     padding: 0;
 }
 
-ol.notifications>li {
-    display: -webkit-box;
+ol.notifications > li {
+    display: flex;
+    flex-wrap: wrap;
     position: relative;
     width: 100%;
     padding: 10px;
     box-sizing: border-box;
     border-top: 1px solid Gray;
 }
 
 ol.notifications div.how {
     width: 350px;
 }
 
 ol.notifications time {
     display: block;
     color: #888;
     padding: 0 0 20px 0;
 }
 
 ol.notifications div.what {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     padding: 0 0 0 10px;
-    -webkit-box-flex: 1;
+    flex: 1;
 }
 
-    ol.notifications>li div.what ul.effects>li.builder {
+    ol.notifications > li div.what ul.effects > li.builder {
         display: inline;
         padding-right: 5px;
     }
 
-ol.notifications ul.causes>li, ol.notifications div.problem {
+ol.notifications ul.causes > li, ol.notifications div.problem {
     display: -webkit-box;
 }
 
 ol.notifications ul.causes div.description, ol.notifications div.problem ul.effects {
     -webkit-box-flex: 1;
 }
 
-ol.notifications>li div.problem {
+ol.notifications > li div.problem {
     padding-bottom: 10px;
 }
 
-    ol.notifications>li div.problem>ul.actions {
+    ol.notifications > li div.problem > ul.actions {
         visibility: hidden;
     }
 
-    ol.notifications>li:hover div.problem>ul.actions {
+    ol.notifications > li:hover div.problem > ul.actions {
         visibility: visible;
     }
 
-    ol.notifications>li table.failures {
+    ol.notifications > li table.failures {
         opacity: 0.2;
         -webkit-transition: opacity 0.5s;
     }
 
-    ol.notifications>li:hover table.failures {
+    ol.notifications > li:hover table.failures {
         opacity: 1;
     }
 
-ol.notifications>li ul.causes>li>ul.actions {
+ol.notifications > li ul.causes > li > ul.actions {
 }
 
-    ol.notifications>li ul.causes>li>div.description {
+    ol.notifications > li ul.causes > li > div.description {
         padding: 0 10px 5px 0;
         display: -webkit-box;
     }
 
-        ol.notifications>li ul.causes>li>div.description>a {
+        ol.notifications > li ul.causes > li > div.description > a {
             padding: 5px 10px 5px 10px;
             margin: -5px 10px -2px 0;
             border-radius: 4px;
             display: inline-block;
         }
 
-        ol.notifications>li ul.causes>li:hover>div.description>a {
+        ol.notifications > li ul.causes > li:hover > div.description > a {
             background-color: #555;
             color: White;
         }
 
-        ol.notifications>li ul.causes>li:hover>div.description>a::after {
+        ol.notifications > li ul.causes > li:hover > div.description > a::after {
             content: '';
             width: 0;
             height: 0;
             margin-top: 5px;
             position: absolute;
             margin-left: 10px;
             border-top: 5px solid White;
             border-left: 5px solid #555;
             border-bottom: 5px solid White;
         }
 
-        ol.notifications>li ul.causes>li>div.description>span {
+        ol.notifications > li ul.causes > li > div.description > span {
             padding: 0 10px 0 0;
             display: block;
             cursor: default;
             pointer-events: none;
             -webkit-box-flex: 1;
         }
 
-        ol.notifications>li ul.causes>li>div.description>span>span.author {
+        ol.notifications > li ul.causes > li > div.description > span > span.author {
             padding: 0 0 0 5px;
             font-style: italic;
         }
 
-        ol.notifications>li ul.causes>li>div.description>span>span.reviewer {
+        ol.notifications > li ul.causes > li > div.description > span > span.reviewer {
             color: Gray;
         }
 
-        ol.notifications>li ul.causes>li>div.description>span>span.bugID::before {
+        ol.notifications > li ul.causes > li > div.description > span > span.bugID::before {
             content: '[bug ';
             padding-left: 8px;
         }
 
-        ol.notifications>li ul.causes>li>div.description>span>span.bugID::after {
+        ol.notifications > li ul.causes > li > div.description > span > span.bugID::after {
             content: ']';
         }
 
-        ol.notifications>li ul.causes>li>div.description>span>span.bugID>a {
+        ol.notifications > li ul.causes > li > div.description > span > span.bugID > a {
             cursor: hand;
             pointer-events: auto;
         }
 
-        ol.notifications>li ul.causes>li>div.description>span>span.reviewer::before {
+        ol.notifications > li ul.causes > li > div.description > span > span.reviewer::before {
             content: ' (';
         }
 
-        ol.notifications>li ul.causes>li>div.description>span>span.reviewer::after {
+        ol.notifications > li ul.causes > li > div.description > span > span.reviewer::after {
             content: ')';
         }
 
-    ol.notifications>li ul.causes>li>ul.actions {
+    ol.notifications > li ul.causes > li > ul.actions {
         visibility: hidden;
     }
 
-    ol.notifications>li ul.causes>li:hover>ul.actions {
+    ol.notifications > li ul.causes > li:hover > ul.actions {
         visibility: visible;
     }
 
-    ol.notifications>li ul.causes>li li {
+    ol.notifications > li ul.causes > li li {
         padding: 10px 0 0 0;
         display: inline;
     }
 
 ol.notifications table.failures {
     border-collapse: collapse;
     table-layout: fixed;
     font-size: 11px;
     width: 350px;
 }
@@ skipping 39 matching lines @@
         background-color: #bfdfff;
     }
 
     ol.notifications table.failures tbody tr.IMAGE td:first-child span {
         background-color: #69f;
     }
 
     ol.notifications table.failures tbody tr.IMAGE\+TEXT td:first-child span {
         background-color: #96f;
     }