Better screen real estate for ScatterWidget (#31)

* tighter

* progress

* Better screen real estate for ScatterWidget

- Remove point counters to save vertical space
- Compact single-row controls layout
- Smaller dots (radius 3) for finer detail
- Fix SVG zoom issue with max-width constraint
- Scale brush size relative to canvas dimensions
- Remove X/Y axis labels (keep grid)
- Default height now 400px
- Pastel button backgrounds for better color dot visibility
- Bump version to 0.4.0

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: koaning

conductor.json

@@ -0,0 +1,3 @@
+{
+  "setup": "make install"
+}

drawdata/__init__.py

@@ -14,7 +14,7 @@ class ScatterWidget(anywidget.AnyWidget):
     data = traitlets.List([]).tag(sync=True)
     brushsize = traitlets.Int(40).tag(sync=True)
     width = traitlets.Int(800).tag(sync=True)
-    height = traitlets.Int(500).tag(sync=True)
+    height = traitlets.Int(400).tag(sync=True)
 
     @property
     def data_as_pandas(self):

drawdata/static/scatter_widget.css

@@ -87,11 +87,11 @@
     width: 100%;
     max-width: 1200px;
     box-sizing: border-box;
-    margin: 0 auto;
-    padding: 1rem;
+    margin: 0;
+    padding: 0.25rem;
     color: var(--dd-text-color);
     background-color: var(--dd-bg-color);
-    border-radius: 0.5rem;
+    border-radius: 0.25rem;
     transition: background-color 0.3s ease, color 0.3s ease;
 }
 
@@ -100,8 +100,8 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 0.75rem;
-    margin-bottom: 1rem;
+    gap: 0.5rem;
+    margin-bottom: 0.25rem;
     width: 100%;
 }
 
@@ -179,40 +179,6 @@
     box-shadow: none;
 }
 
-/* Count labels */
-.dd-scatter-container span.count {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.25rem 0.75rem;
-    font-size: 0.75rem;
-    font-weight: 600;
-    border-radius: 9999px;
-    margin-right: 0.5rem;
-    border: 1px solid transparent;
-    transition: all 0.2s ease;
-}
-
-.dd-scatter-container span.count[data-color="a"] {
-    background-color: var(--dd-count-bg-a);
-    color: var(--dd-count-text-a);
-}
-
-.dd-scatter-container span.count[data-color="b"] {
-    background-color: var(--dd-count-bg-b);
-    color: var(--dd-count-text-b);
-}
-
-.dd-scatter-container span.count[data-color="c"] {
-    background-color: var(--dd-count-bg-c);
-    color: var(--dd-count-text-c);
-}
-
-.dd-scatter-container span.count[data-color="d"] {
-    background-color: var(--dd-count-bg-d);
-    color: var(--dd-count-text-d);
-}
-
 /* Radio button class selector */
 .dd-scatter-container .class-selector {
     display: flex;
@@ -336,7 +302,7 @@
 .dd-scatter-container .dd-scatter-svg-container {
     width: 100%;
     box-sizing: border-box;
-    margin-top: 0.75rem;
+    margin-top: 0.25rem;
 }
 
 .dd-scatter-container svg {