.

src-tauri/src/data.rs

@@ -35,9 +35,9 @@ pub fn get_notes_list(search: &str) -> Vec<Note> {
     let mut notes = Vec::new();
     for note in note_iter.expect("Failed to query notes") {
         let mut _note = note.expect("Failed to get note");
-        _note.text = _note.text.replace("\n", "<br>").chars().take(57).collect();
+        _note.text = _note.text.replace("\n", "<br>").chars().take(40).collect();
 
-        if _note.text.len() >= 57 {
+        if _note.text.len() >= 40 {
             _note.text.push_str("...");
         }
 

src/main.js

@@ -44,9 +44,9 @@ async function get_notes_list() {
           <svg style="fill: var(--color-accent);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24px" width="24px">
           <path d="M9,19q-2.93,0-4.96-2.04Q2,14.93 2,12Q2,9.07 4.04,7.04T9,5t4.96,2.04T16,12t-2.04,4.96T9,19Zm0-7Zm7,6.9v-2q1.75-0.35 2.88-1.72T20,12T18.88,8.82T16,7.1v-2q2.6,0.35 4.3,2.31Q22,9.38 22,12t-1.7,4.59T16,18.9Zm-3.46-3.36Q14,14.08 14,12q0-2.08-1.46-3.54T9,7Q6.93,7 5.46,8.46T4,12t1.46,3.54T9,17t3.54-1.46Z" />
           </svg>
-          <p style="color: #59a9ff; font-weight: bold; font-size: 0.9rem">${note.title}</p>
+          <p style="color: #59a9ff; font-weight: bold; font-size: 0.8rem">${note.title}</p>
         </div>
-        <p style="font-size: 0.8rem;">${new Date(note.created_at).toDateString()} ${new Date(note.created_at).toLocaleTimeString().split(':')[0]}:${new Date(note.created_at).toLocaleTimeString().split(':')[1]}</p>
+        <p style="font-size: 0.7rem;">${new Date(note.created_at).toDateString()} ${new Date(note.created_at).toLocaleTimeString().split(':')[0]}:${new Date(note.created_at).toLocaleTimeString().split(':')[1]}</p>
       </div>
       <div style="display: flex; flex-direction: row; justify-content: end; align-items: center;">
         <p style="text-align: end;">${note.text}</p>

src/styles_default.css

@@ -16,6 +16,7 @@ body {
   width: 100vw;
   height: 100vh;
   overflow: hidden;
+  font-size: 0.8rem;
 }
 
 .app-shell {
@@ -204,8 +205,6 @@ input:focus {
   justify-content: center;
   border-radius: 10px;
   padding: 0.6rem;
-  transition: background-color 0.1s ease;
-
 }
 
 .button .icon {
@@ -255,9 +254,7 @@ input:focus {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  align-items: stretch;
+  align-items: stretch; 
-  transition: background-color 0.1s ease;
-  
 }
 
 .notes-list div div {
@@ -294,7 +291,7 @@ input:focus {
   position: absolute;
   right: 1rem;
   bottom: 1rem;
-  width: 2rem;
+  width: 1.5rem;
-  height: 2rem;
+  height: 1.5rem;
   background-color: var(--color-accent);
 }