Web Inspector: recording view and slider have jumbled layout at narrow widths
authorwebkit@devinrousso.com <webkit@devinrousso.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 18 Dec 2017 21:51:36 +0000 (21:51 +0000)
committerwebkit@devinrousso.com <webkit@devinrousso.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 18 Dec 2017 21:51:36 +0000 (21:51 +0000)
https://bugs.webkit.org/show_bug.cgi?id=180597
<rdar://problem/35939904>

Reviewed by Timothy Hatcher.

* UserInterface/Views/RecordingContentView.css:
(.content-view:not(.tab).recording > header > .slider-container):
(.content-view:not(.tab).recording > header > .slider-container > *):
(.content-view:not(.tab).recording > header > .slider-container > input[type=range]):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@226077 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css

index 4ef79cf..097f3db 100644 (file)
@@ -1,3 +1,16 @@
+2017-12-18  Devin Rousso  <webkit@devinrousso.com>
+
+        Web Inspector: recording view and slider have jumbled layout at narrow widths
+        https://bugs.webkit.org/show_bug.cgi?id=180597
+        <rdar://problem/35939904>
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Views/RecordingContentView.css:
+        (.content-view:not(.tab).recording > header > .slider-container):
+        (.content-view:not(.tab).recording > header > .slider-container > *):
+        (.content-view:not(.tab).recording > header > .slider-container > input[type=range]):
+
 2017-12-18  Matt Baker  <mattbaker@apple.com>
 
         Web Inspector: Canvas tab: placeholder/help text wrapping looks poor at narrow widths
index dff9a5f..a2074ea 100644 (file)
 
 .content-view:not(.tab).recording > header > .slider-container {
     display: flex;
-    padding: 8px;
+    flex-wrap: wrap;
+    padding: 4px 0;
     background-color: white;
     border: 1px solid var(--border-color);
     border-radius: 4px;
 }
 
+.content-view:not(.tab).recording > header > .slider-container > * {
+    margin: 4px 8px;
+}
+
 .content-view:not(.tab).recording > header > .slider-container > input[type=range] {
     flex: 1;
-    -webkit-margin-start: 10px;
+    width: 100%;
 }
 
 .content-view:not(.tab).recording > header > .slider-container > input[type=range]::-webkit-slider-runnable-track {