Responsive history

customize.dist/src/less2/include/toolbar-history.less

@@ -22,6 +22,35 @@
             font: @colortheme_app-font;
         }
 
+
+        @media screen and (max-width: 870px) {
+            flex-flow: column;
+            .cp-toolbar-history-actions {
+                width: 100%;
+                .cp-history-actions-first {
+                    margin-right: 0 !important;
+                }
+            }
+            .cp-toolbar-history-timeline {
+                width: ~"calc(100% - 20px)";
+                margin-right: 10px !important;
+            }
+        }
+
+        @media screen and (max-height: 500px) {
+            padding-top: 0px;
+            .cp-history-timeline-line {
+                display: none !important;
+            }
+            .cp-toolbar-history-timeline {
+                width: 100% !important;
+                margin: 0 !important;
+            }
+            .cp-history-timeline-actions {
+                margin-left: 0 !important;
+            }
+        }
+
         &.cp-history-init {
             padding: 0;
             height: 32px;
@@ -33,6 +62,15 @@
             flex: 1;
             margin-left: 10px;
             margin-right: @fill-width;
+            .cp-history-timeline-time {
+                font-size: 12px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                flex: 1;
+                min-width: 0;
+                text-align: center;
+            }
         }
         .cp-toolbar-history-actions {
             display: flex;

customize.dist/src/less2/include/toolbar.less

@@ -923,7 +923,7 @@
                 width: 30px;
             }
         }
-        @media screen and (max-width: @browser_media-medium-screen) {
+        @media screen and (max-width: 600px) {
             flex-flow: column;
             .cp-toolbar-snapshots-info {
                 max-width: 100%;