Merge pull request #529 from Textualize/css-add-scrollbar-size

[css] add `scrollbar-size` properties

sandbox/basic.css

@@ -74,7 +74,7 @@ App > Screen {
 
 
 Tweet {
-  height: auto;
+  height: 12;
   width: 80;
  
   margin: 1 3;
@@ -90,6 +90,15 @@ Tweet {
   box-sizing: border-box;
 }
 
+Tweet.scrollbar-size-custom {
+  scrollbar-size-vertical: 2;
+}
+
+
+Tweet.scroll-horizontal {
+  scrollbar-size-horizontal: 2;
+}
+
 .scrollable {
   width: 80;
   overflow-y: scroll;
@@ -114,12 +123,15 @@ TweetHeader {
 }
 
 TweetBody {  
-  width: 130%;
+  width: 100%;
   background: $panel;
   color: $text-panel;
   height: auto; 
   padding: 0 1 0 0; 
- 
+}
+
+Tweet.scroll-horizontal TweetBody {
+  width: 350;
 }
 
 .button {

sandbox/basic.py

@@ -107,22 +107,15 @@ class BasicApp(App, css_path="basic.css"):
                 ),
             ),
             content=Widget(
-                Tweet(
-                    TweetBody(),
-                    # Widget(
-                    #     Widget(classes={"button"}),
-                    #     Widget(classes={"button"}),
-                    #     classes={"horizontal"},
-                    # ),
-                ),
+                Tweet(TweetBody()),
                 Widget(
                     Static(Syntax(CODE, "python"), classes="code"),
                     classes="scrollable",
                 ),
                 Error(),
-                Tweet(TweetBody()),
+                Tweet(TweetBody(), classes="scrollbar-size-custom"),
                 Warning(),
-                Tweet(TweetBody()),
+                Tweet(TweetBody(), classes="scroll-horizontal"),
                 Success(),
             ),
             footer=Widget(),