options in properties menu fit better

2 files changed, 8 insertions, 4 deletions

diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index f571dcf25..dd4f67106 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -23,7 +23,7 @@ $linkGap : 3px;
     // margin-right: 7px;
     // margin-left: 8px;
     height: 28px;
-    width: 226px;//29px;
+   // width: 226px;//29px;
     display: flex;
     align-items: center;
     // height: 25px;
@@ -55,14 +55,17 @@ $linkGap : 3px;
 .propertiesButtons-linkButton-empty.toggle-on {
     background-color: $medium-blue;
     color: $white;
+    width:100%
 }
 .propertiesButtons-linkButton-empty.toggle-hover {
     background-color: $light-blue;
     color: $black;
+    width:100%
 }
 .propertiesButtons-linkButton-empty.toggle-off {
     background-color: white;//$dark-gray;
     color: black; //white;
+    width:100%
 }
 
 .propertiesButtons-icon {
@@ -71,6 +74,7 @@ $linkGap : 3px;
 
 .propertiesButtons {
     position:relative;
+    width: 100%;
     //     margin-top: 3px;
 //    // grid-column: 1/4;
 //     width: 100%;
@@ -94,8 +98,8 @@ $linkGap : 3px;
 
 .propertiesButtons-button {
     pointer-events: auto;
-    padding-right: 5px;
-    width: 25px;
+    padding-right: 8px;//5px;
+    width: 100%;//width: 25px;
     border-radius: 5px;
     margin-right: 20px;
     margin-bottom: 8px;
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 2a31f0f2c..ba25e6697 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -126,7 +126,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
 
     @computed get clustersButton() {
         return this.propertyToggleBtn(
-            on => 'Clusters',
+            on => (on ?'DISABLE CLUSTERS' : 'HIGHLIGHT CLUSTERS'),
             '_freeform_useClusters',
             on => `${on ? 'Hide' : 'Show'} clusters`,
             on => <FaBraille />