#3484 homepage: improve styling and functionality

Signed-off-by: Patrizio Bekerle <[email protected]>

Author: pbek

docs/homepage/custom.css

@@ -1,14 +1,38 @@
-/*
-  Visual marker for QOwnNotes suggestion rows.
-
-  The class is added by docs/homepage/custom.js when a suggestion text
-  contains the configured QON_LABEL prefix.
-*/
-
 button.qon-suggestion {
-  border-left: 3px solid #2f855a;
+    border-left: 3px solid #2f855a;
+    align-items: flex-start;
+    text-align: left;
 }
 
 button.qon-suggestion span {
-  color: #2f855a;
+    color: #2f855a;
+}
+
+/* Extra bottom padding on the <li> makes room for the URL hint div. */
+li.qon-li-has-url {
+    position: relative;
+    padding-bottom: 1.45rem;
+}
+
+/* The URL hint div is appended to the <li> by custom.js and sits below the
+   button text. It is attached to the <li> (not the <button>) so that it
+   survives React replacing the button node when the item becomes active. */
+li.qon-li-has-url .qon-url-hint {
+    position: absolute;
+    left: 1rem;
+    right: 8.5rem;
+    bottom: 0.25rem;
+    font-size: 0.72em;
+    line-height: 1.2;
+    color: rgba(47, 133, 90, 0.82);
+    opacity: 0.95;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    pointer-events: none;
+}
+
+html.qon-keyboard-nav div[role="dialog"] dialog ul li > button {
+    pointer-events: none;
 }