Don't trim long titles, and show them in more lines.

Reserve space for header icons, and so no layout occur when show that icons.

css/style.scss

@@ -34,11 +34,10 @@
     min-height: 150px;
     width: 250px;
     border-radius: 8px;
-    box-shadow: 0 4px 6px #c1c1c1;
 }
 
 .quicknote:hover {
-    box-shadow: 0px 0px 6px #808080;
+    box-shadow: 0px 0px 4px #808080;
 }
 
 #title-editable:empty:before {
@@ -95,11 +94,9 @@
 }
 
 #div-content .note-title {
-   margin-right: 52px;
    font-size: 18px;
    font-weight: bold;
-   text-overflow: ellipsis;
+   overflow-wrap: break-word;
-   overflow: hidden;
 }
 
 .note-content {
@@ -117,8 +114,9 @@
     background-size: 22px;
     min-width: 28px;
     min-height: 28px;
-    opacity: 0.54;
     border-radius: 50%;
+    -moz-transition: opacity 0.218s ease-in;
+    transition: opacity 0.218s ease-in;
 }
 
 .icon-header-note:hover {
@@ -127,12 +125,12 @@
 }
 
 .hide-header-icon {
-    display: none;
+    opacity: 0;
 }
 
 .fixed-header-icon,
 .show-header-icon {
-    display: block;
+    opacity: 0.54;
 }
 
 .noselect {
@@ -227,7 +225,7 @@ div[contenteditable="true"] {
 }
 
 #title-editable {
-    width: 90%;
+    width: 100%;
     background: none;
     color: unset;
     border: none;

js/qn-colorpick.js

@@ -1,3 +1,24 @@
+/*
+ * @copyright 2022 Matias De lellis <mati86dl@gmail.com>
+ *
+ * @author 2022 Matias De lellis <mati86dl@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
 'use strict';
 
 function QnColorPick(parentSelector, onSelectColor) {

js/script.js

@@ -361,7 +361,7 @@ View.prototype = {
         $('#notes-grid-div').on("click", ".icon-delete-note", function (event) {
             event.stopPropagation();
 
-            var gridnote = $(this).parent().parent().parent();
+            var gridnote = $(this).parent().parent();
             var id = parseInt(gridnote.attr('data-id'), 10);
 
             var note = self._notes.read(id);
@@ -408,7 +408,7 @@ View.prototype = {
             event.stopPropagation();
 
             var icon =  $(this);
-            var gridNote = icon.parent().parent().parent();
+            var gridNote = icon.parent().parent();
             var id = parseInt(gridNote.attr('data-id'), 10);
 
             var note = self._notes.read(id);
@@ -432,7 +432,7 @@ View.prototype = {
             event.stopPropagation();
 
             var icon =  $(this);
-            var gridNote = icon.parent().parent().parent();
+            var gridNote = icon.parent().parent();
             var id = parseInt(gridNote.attr('data-id'), 10);
 
             var note = self._notes.read(id);

js/templates/note-item.handlebars

@@ -10,16 +10,14 @@
 			</div>
 		</div>
 		<div class='note-body'>
-			<div>
+			{{#if isPinned}}
-				{{#if isPinned}}
+				<div class="icon-header-note icon-pinned fixed-header-icon" title="{{t "quicknotes" "Unpin note"}}"></div>
-					<div class="icon-header-note icon-pinned fixed-header-icon" title="{{t "quicknotes" "Unpin note"}}"></div>
+			{{else}}
-				{{else}}
+				<div class="icon-header-note icon-pin hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
-					<div class="icon-header-note icon-pin hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
+			{{/if}}
-				{{/if}}
+			<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div>
-				<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div>
+			<div class='note-title'>
-				<div class='note-title'>
+				{{{ title }}}
-					{{{ title }}}
-				</div>
 			</div>
 			<div class='note-content'>
 				{{{ content }}}

js/templates/notes.handlebars

@@ -13,21 +13,19 @@
 				</div>
 			</div>
 			<div class='note-body'>
-				<div>
+				{{#if sharedBy}}
-					{{#if sharedBy}}
+					<div class="icon-header-note icon-share" title="{{tSB sharedBy.0.display_name}}"></div>
-						<div class="icon-header-note icon-share" title="{{tSB sharedBy.0.display_name}}"></div>
+					<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Leave this shared note"}}"></div>
-						<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Leave this shared note"}}"></div>
+				{{else}}
+					{{#if isPinned}}
+						<div class="icon-header-note icon-pinned fixed-header-icon" title="{{t "quicknotes" "Unpin note"}}"></div>
 					{{else}}
-						{{#if isPinned}}
+						<div class="icon-header-note icon-pin hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
-							<div class="icon-header-note icon-pinned fixed-header-icon" title="{{t "quicknotes" "Unpin note"}}"></div>
-						{{else}}
-							<div class="icon-header-note icon-pin hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
-						{{/if}}
-						<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div>
 					{{/if}}
-					<div class='note-title'>
+					<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div>
-						{{{ title }}}
+				{{/if}}
-					</div>
+				<div class='note-title'>
+					{{{ title }}}
 				</div>
 				<div class='note-content'>
 					{{{ content }}}
@@ -56,10 +54,8 @@
 				<div class='note-attachts'></div>
 			</div>
 			<div class='note-body'>
-				<div>
+				<div class="icon-header-note icon-pin fixed-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
-					<div class="icon-header-note icon-pin fixed-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
+				<div contenteditable="true" id='title-editable' class='note-title' data-placeholder="{{t "quicknotes" "Title"}}"></div>
-					<div contenteditable="true" id='title-editable' class='note-title' data-placeholder="{{t "quicknotes" "Title"}}"></div>
-				</div>
 				<div contenteditable="true" id='content-editable' class='note-content'></div>
 				<div class='note-shares'></div>
 				<div class='note-tags'></div>