From 475a111d39313ace8f5b5f71cf8fd65583b0d0f0 Mon Sep 17 00:00:00 2001
From: Russ Tedrake <russt@mit.edu>
Date: Tue, 7 Sep 2021 09:17:55 -0400
Subject: [PATCH] Fix width on FunctionController property_name

Before: Text descriptions for buttons (FunctionController) were being truncated unnecessarily to the same width as other Controllers that must share real estate with input elements.

This PR sets the css width for FunctionController elements to 100%.  I've added to example.html in case it's useful.
---
 example.html                | 5 +++++
 src/dat/gui/_structure.scss | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/example.html b/example.html
index 2c3d7c3..d0f52eb 100644
--- a/example.html
+++ b/example.html
@@ -58,6 +58,11 @@
     var f3 = f2.addFolder('Nested Folder');
     f3.add(obj, 'growthSpeed');
 
+    obj['Button with a long description'] = function () {
+      console.log('Button with a long description pressed');
+    };
+    gui.add(obj, 'Button with a long description');
+
   </script>
 </body>
 </html>
diff --git a/src/dat/gui/_structure.scss b/src/dat/gui/_structure.scss
index 3193f8e..4be6df1 100644
--- a/src/dat/gui/_structure.scss
+++ b/src/dat/gui/_structure.scss
@@ -172,6 +172,11 @@ $button-height: 20px;
     text-overflow: ellipsis;
   }
 
+  /** Function controllers can use the entire width */
+  .cr.function .property-name {
+    width: 100%;
+  }
+
   /** Controller-half (right) */
   .c {
     float: left;