more updates

2 files changed, 18 insertions, 11 deletions

diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.scss b/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
index 2b3f8f2c9..44752e034 100644
--- a/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
+++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
@@ -5,12 +5,12 @@
     overflow: visible;
     height: 100%;
     pointer-events: none;
-    
+
     &.true {
         padding-left: 5px;
         padding-right: 5px;
         border-left: $standard-border;
-        background-color: #4476f73d;
+        background-color: $medium-blue-alt;
     }
 
     >input:not(:checked)~&.true {
@@ -21,8 +21,9 @@
         display: flex;
         height: 100%;
         align-items: center;
+        gap: 5px;
 
-        .collectionView{
+        .collectionView {
             overflow: visible !important;
         }
 
@@ -56,7 +57,7 @@
         }
 
         .bottomPopup-descriptions {
-            cursor:pointer;
+            cursor: pointer;
             display: inline;
             white-space: nowrap;
             padding-left: 8px;
@@ -69,7 +70,7 @@
         }
 
         .bottomPopup-exit {
-            cursor:pointer;
+            cursor: pointer;
             display: inline;
             white-space: nowrap;
             margin-right: 10px;
@@ -97,7 +98,7 @@
             transition: transform 0.2s;
             align-items: center;
             justify-content: center;
-            transition:0.1s;
+            transition: 0.1s;
 
             &:hover {
                 transform: scale(1.05);
diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
index 3327bef36..713d93f97 100644
--- a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
@@ -108,12 +108,13 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
     }
 
     render() {
-        const guid = Utils.GenerateGuid();
-        const flexDir: any = StrCast(this.Document.flexDirection);
-        const expandable: boolean = BoolCast(this.props.Document.linearViewExpandable);
+        const guid = Utils.GenerateGuid(); // Generate a unique ID to use as the label
+        const flexDir: any = StrCast(this.Document.flexDirection); // Specify direction of linear view content
+        const flexGap: number = NumCast(this.Document.flexGap); // Specify the gap between linear view content
+        const expandable: boolean = BoolCast(this.props.Document.linearViewExpandable); // Specify whether it is expandable or not
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
-        const icon: string = StrCast(this.props.Document.icon);
+        const icon: string = StrCast(this.props.Document.icon); // Menu opener toggle
 
         const menuOpener = <label htmlFor={`${guid}`}
             style={{
@@ -134,7 +135,12 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
                 <input id={`${guid}`} type="checkbox" checked={BoolCast(this.props.Document.linearViewIsExpanded)} ref={this.addMenuToggle}
                     onChange={action(() => this.props.Document.linearViewIsExpanded = this.addMenuToggle.current!.checked)} />
 
-                <div className="collectionLinearView-content" style={{ height: this.dimension(), flexDirection: flexDir }}>
+                <div className="collectionLinearView-content"
+                    style={{
+                        height: this.dimension(),
+                        flexDirection: flexDir,
+                        gap: flexGap
+                    }}>
                     {this.childLayoutPairs.map((pair, ind) => {
                         const nested = pair.layout._viewType === CollectionViewType.Linear;
                         const dref = React.createRef<HTMLDivElement>();