Minor CSS fix for large screens

OpenDroneMap · Jul 2, 2024 · 7baf02e · 7baf02e
1 parent 0be7e5c
commit 7baf02e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/app/static/app/js/components/TaskListItem.jsx b/app/static/app/js/components/TaskListItem.jsx
@@ -739,7 +739,7 @@ class TaskListItem extends React.Component {
             />
         : ""}
         <div className="row">
-          <div className="col-xs-7 col-sm-6 col-md-5 name">
+          <div className="col-xs-7 col-sm-6 col-md-5 col-lg-6 name">
             <i onClick={this.toggleExpanded} className={"clickable far " + (this.state.expanded ? "fa-minus-square" : " fa-plus-square")}></i> <a href="javascript:void(0);" onClick={this.toggleExpanded} className="name-link">{name}</a>
             {userTags.length > 0 ? 
               userTags.map((t, i) => <div key={i} className="tag-badge small-badge" onClick={this.handleTagClick(t)}>{t}</div>)
@@ -751,7 +751,7 @@ class TaskListItem extends React.Component {
           <div className="col-md-2 hidden-xs hidden-sm details">
             <i className="far fa-clock"></i> {this.hoursMinutesSecs(this.state.time)}
           </div>
-          <div className="col-xs-5 col-sm-6 col-md-4 actions">
+          <div className="col-xs-5 col-sm-6 col-md-4 col-lg-3 actions">
             {showEditLink ?
               <a href="javascript:void(0);" onClick={this.startEditing}>{statusLabel}</a>
               : statusLabel}

diff --git a/app/static/app/js/css/TaskListItem.scss b/app/static/app/js/css/TaskListItem.scss
@@ -78,6 +78,12 @@
                 padding: 0;
             }
             margin-bottom: 12px;
+            @media screen and (min-width: 1200px) {
+                tr td:first-child {
+                    width: 20%;
+                    max-width: 150px;
+                }
+            }
         }
 
         .task-warning{