update note flex styles

OurPlanscape · Aug 14, 2024 · d02d5fd · d02d5fd
1 parent f94fb31
commit d02d5fd
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 14 deletions.
diff --git a/src/interface/src/app/plan/area-notes/area-notes.component.html b/src/interface/src/app/plan/area-notes/area-notes.component.html
@@ -65,17 +65,23 @@
 </mat-form-field>
 
 <!-- new, featureflagged form-field -->
-<div *appFeatureFlag="'new_planning_area'" class="notes">
-  <div *ngFor="let note of notes" class="note grow">
-    <div class="note-head">
-      <div>{{ note.user_name }}</div>
-      <div class="date">{{ note.created_at | date }}</div>
+<div *appFeatureFlag="'new_planning_area'" class="notes grow">
+  <div *ngFor="let note of notes" class="note-enclosed">
+    <div class="note-left">
+      <div class="note-head">
+        <div>{{ note.user_name }}</div>
+        <div class="date">{{ note.created_at | date }}</div>
+      </div>
+      <div class="note-content">
+        {{ note.content }}
+      </div>
+    </div>
+    <div class="note-right">
       <button
         *ngIf="canDelete(note)"
         mat-icon-button
         [matMenuTriggerFor]="menu"
-        aria-label="more note options"
-        style="float: right; position: absolute; right: 4px">
+        aria-label="more note options">
         <mat-icon>more_vert</mat-icon>
       </button>
       <mat-menu #menu="matMenu">
@@ -88,9 +94,6 @@
         </button>
       </mat-menu>
     </div>
-    <div class="note-content">
-      {{ note.content }}
-    </div>
   </div>
 </div>
 <mat-form-field

diff --git a/src/interface/src/app/plan/area-notes/area-notes.component.scss b/src/interface/src/app/plan/area-notes/area-notes.component.scss
@@ -32,7 +32,7 @@
   }
 }
 
-.notes-header {
+.notes-header { // fflagged section
   @include h4();
   width: 100%;
   padding: 16px 229px 16px 16px;
@@ -43,9 +43,8 @@
 .notes {
   overflow-y: auto;
   flex: 1;
-  .grow {
+  .grow { // fflagged section
     flex-grow: 1;
-    flex: unset;
   }
 }
 
@@ -54,7 +53,22 @@
   color: $color-black;
 }
 
-.note-head {
+.note-right {
+  width: 28px;
+}
+
+
+
+.note-enclosed { // fflagged section
+  padding: 16px;
+  color: $color-black;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between
+}
+
+
+.note-head { // fflagged section
   @include small-input-label();
   display: flex;
   gap: 8px;