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
@@ skipping 22 matching lines @@
     padding: 0;
     margin: 0;
 }
 
 ol.notifications ul {
     list-style: none;
     padding: 0;
 }
 
 ol.notifications>li {
-    display: -webkit-box;
+    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;
+    box-orient: vertical;

[ojan, 2014/03/20 19:47:27]

I don't think we expose an unprefixed box-orient.

     padding: 0 0 0 10px;
-    -webkit-box-flex: 1;
+    flex: 1;
 }
 
     ol.notifications>li div.what ul.effects>li.builder {
         display: inline;
         padding-right: 5px;
     }
 
 ol.notifications ul.causes>li, ol.notifications div.problem {
     display: -webkit-box;
 }
@@ skipping 155 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;
     }