fixing layouts UI

2 files changed, 17 insertions, 24 deletions

diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 83e0fc0d5..76c934551 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -57,7 +57,6 @@
             font-size: 12.5px;
             padding: 4px;
             display: flex;
-            width: 200px;
             color: white;
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
@@ -92,7 +91,6 @@
             font-size: 12.5px;
             padding: 4px;
             display: flex;
-            width: 200px;
             color: white;
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
@@ -126,7 +124,6 @@
             font-size: 12.5px;
             padding: 4px;
             display: flex;
-            width: 200px;
             color: white;
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
@@ -160,7 +157,6 @@
             font-size: 12.5px;
             padding: 4px;
             display: flex;
-            width: 200px;
             color: white;
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
@@ -275,7 +271,6 @@
             font-size: 12.5px;
             padding: 4px;
             display: flex;
-            width: 200px;
             color: white;
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
@@ -299,18 +294,17 @@
                     cursor: pointer;
                 }
             }
+        }
 
-            .propertiesView-fields-title-checkbox {
-                float: right;
-                height: 20px;
-                margin-top: -13px;
-                margin-left: 115px;
-
-                .propertiesView-fields-title-checkbox-text {
-                    font-size: 7px;
-                    margin-top: -10px;
-                    margin-left: 6px;
-                }
+        .propertiesView-fields-checkbox {
+            float: right;
+            height: 20px;
+            margin-top: -9px;
+
+            .propertiesView-fields-checkbox-text {
+                font-size: 7px;
+                margin-top: -10px;
+                margin-left: 6px;
             }
         }
 
@@ -352,7 +346,6 @@
             font-size: 12.5px;
             padding: 4px;
             display: flex;
-            width: 200px;
             color: white;
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index c4291f2a4..976e52fda 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -361,16 +361,16 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     render() {
 
         if (!this.selectedDoc) {
-            return <div className="propertiesView" >
-                <div className="propertiesView-title">
+            return <div className="propertiesView" style={{ width: this.props.width }}>
+                <div className="propertiesView-title" style={{ width: this.props.width, paddingLeft: 6 }}>
                     No Document Selected
             </div> </div>;
         }
 
         const novice = Doc.UserDoc().noviceMode;
 
-        return <div className="propertiesView" >
-            <div className="propertiesView-title">
+        return <div className="propertiesView" style={{ width: this.props.width }} >
+            <div className="propertiesView-title" style={{ width: this.props.width }}>
                 <div className="propertiesView-title-name">Properties </div>
                 <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
                     <FontAwesomeIcon icon="times" color="black" size="sm" />
@@ -381,7 +381,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             </div>
             <div className="propertiesView-settings">
                 <div className="propertiesView-settings-title" style={{ backgroundColor: this.openActions ? "black" : "" }}>
-                    Document Actions
+                    Actions
                     <div className="propertiesView-settings-title-icon"
                         onPointerDown={() => runInAction(() => { this.openActions = !this.openActions; })}>
                         <FontAwesomeIcon icon={this.openActions ? "caret-down" : "caret-right"} size="lg" color="white" />
@@ -447,9 +447,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         </div>
                     </div>
                 </div>
-                {!novice && this.openFields ? <div className="propertiesView-fields-title-checkbox">
+                {!novice && this.openFields ? <div className="propertiesView-fields-checkbox">
                     {this.fieldsCheckbox}
-                    <div className="propertiesView-fields-title-checkbox-text">Layout</div>
+                    <div className="propertiesView-fields-checkbox-text">Layout</div>
                 </div> : null}
                 {this.openFields ?
                     <div className="propertiesView-fields-content">