Fix: Sort div bottom #7

Author: peterjuma

src/App.js

@@ -608,17 +608,15 @@ handleUnpinNote = async (noteid) => {
             handleSearchNotes={this.handleSearchNotes}
           />
 
-          {/* Render pinned notes separately */}
           <h4 className="fixed-header">Pinned Notes</h4>
-          <ul className="note-list-pin">
+          <div className="note-list-pin">
           {pinnedNoteListItems}
-          </ul>
+          </div>
 
-          {/* Render unpinned notes separately */}
           <h4 className="fixed-header">Other Notes</h4>
-          <ul className="note-list-other">
+          <div className="note-list-other">
           {otherNoteListItems}
-          </ul>
+          </div>
 
           <NoteSort
             handleSortNotes={this.handleSortNotes}

src/styles.css

@@ -226,8 +226,8 @@ input[type="search"]::-webkit-search-cancel-button {
 
 /* Note List Container*/
 .note-list-pin {
-  max-height: 300px; /* Set the desired maximum height */
-  overflow-y: scroll; /* Enable vertical scrolling */
+  height: 270px; /* Set the desired maximum height */
+  overflow-y: auto; /* Enable vertical scrolling */
   margin: 10px 0; /* Add margin for spacing */
   padding-left: 0;
   list-style: none; /* Remove default list styles */
@@ -236,7 +236,7 @@ input[type="search"]::-webkit-search-cancel-button {
 
 /* Note List Container*/
 .note-list-other {
-  overflow-y: scroll; /* Enable vertical scrolling */
+  overflow-y: auto; /* Enable vertical scrolling */
   margin: 10px 0; /* Add margin for spacing */
   padding-left: 0;
   list-style: none; /* Remove default list styles */