add disclaimer in the browse backups dialog

src/css/dialogs-browse-backups.css

@@ -19,6 +19,10 @@
   height: 10px;
   flex-grow: 1;
   background: #444;
+
+  padding: 20px;
+  overflow: auto;
+  box-sizing: border-box;
 }
 
 .backups-step-actions {
@@ -34,13 +38,20 @@
   margin-top: -250px;
 }
 
-.browse-backups .session-list,
-.browse-backups .snapshot-list {
-  width: 100%;
-  padding: 20px;
-  overflow: auto;
-  height: 100%;
-  box-sizing: border-box;
+.browse-backups .browse-backups-disclaimer {
+  display: flex;
+  margin-bottom: 20px;
+  align-items: center;
+}
+
+.browse-backups .browse-backups-disclaimer-content {
+  padding: 0 20px;
+  font-size: 13px;
+}
+
+.browse-backups .browse-backups-disclaimer > img {
+  border: 1px solid gold;
+  flex-shrink: 0;
 }
 
 .browse-backups .session-item {
@@ -80,7 +91,7 @@
 }
 
 .browse-backups .session-details-title {
-  font-weight: bold;
+  font-size: 13px;
 }
 
 .browse-backups .session-details-info {

src/templates/dialogs/browse-backups.html

@@ -5,13 +5,22 @@
       <span class="dialog-close">X</span>
     </h3>
     <div class="dialog-content backups-wizard-container"></div>
-    <div class="browse-backups-disclaimer"></div>
   </div>
 </script>
 
 <script type="text/template" id="backups-select-session">
 <div class="backups-step-container">
   <div class="backups-step-content">
+    <div class="browse-backups-disclaimer">
+      <img width="90" height="90" style="border: 1px solidd gold">
+      <div class="browse-backups-disclaimer-content">
+        <!-- Keep in sync with MAX_SESSIONS in BackupService.js -->
+        If you forgot to save your work or if Piskel crashed, try to restore one of the automatically backed up sessions below (up to 10 sessions).
+        <br/>
+        <br/>
+        Backups may be erased without notice, so try to save your work to a file or to your gallery as soon as you can.
+      </div>
+    </div>
     <div class="session-list">
     </div>
   </div>