improve widget and kapa CSS on mobile, and finally fix that logo text… (#3446)

_overrides/partials/n8nFeedback.html

@@ -21,7 +21,7 @@
 <!-- Was this page helpful? -->
 {% if feedback %}
   <div class="n8n-feedback-container">
-        <div id="n8n-ratings-feedback" style="display: flex; gap: 1em; align-items: center;">
+        <div id="n8n-ratings-feedback">
             <span>{{ feedback.question }}</span>
             <button type="submit" class="plausible-event-name=Positive+Rating plausible-event-page=/{{ page.url }} n8n-feedback-button-positive" onclick="handleRating('positive')" >
                 <img src="/_images/assets/thumb_up.png" alt="Thumbs up" style="width: 20px; height: 20px; border: none !important;">{{ feedback.positive_button_text }}

docs/_extra/css/extra.css

@@ -306,6 +306,12 @@
 	}
 }
 
+@media screen and (max-width: 1220px) {
+ .n8n-kapa-button {
+  margin: 1em;
+ }
+}
+
 
   /* dark mode */  
   /* [data-md-color-scheme="dark"] .md-header{
@@ -382,105 +388,10 @@
   display: block;
   }
 
-.sub-footer {
-	width: 100%;
-	margin: 0;
-	padding: 44px 0;
+
+
+.md-nav--primary .md-nav__title[for=__drawer] {
+  color: white;
 }
 
-.sub-footer a {
-	text-decoration: none;
-}
 
-.sub-footer-container {
-	max-width: 61rem;
-	margin: auto;
-	padding: 0 .8rem;
-}
-
-.sub-footer .footer-columns {
-	display: grid;
-	gap: 16px;
-	grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-
-@media screen and (min-width: 300px) {
-	.sub-footer .footer-columns {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-	}
-}
-
-@media screen and (min-width: 1024px) {
-	.sub-footer .footer-columns {
-		grid-template-columns: repeat(5, minmax(0, 1fr));
-	}
-}
-
-@media screen and (min-width: 300px) {
-	.sub-footer .footer-columns > div:last-child {
-		grid-column: span 2 / span 2;
-	}
-}
-
-@media screen and (min-width: 1024px) {
-	.sub-footer .footer-columns > div:last-child {
-		grid-column: auto;
-	}
-}
-
-.sub-footer .column-name {
-	font-size: 18px;
-	font-weight: 700;
-	line-height: 24px;
-	margin-bottom: 16px;
-	color: #101330;
-}
-
-.sub-footer .col-links {
-	list-style: none;
-	margin: 0 0 10px;
-	padding: 0;
-}
-
-.sub-footer .col-links li {
-	margin-bottom: 6px;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	line-height: 1.5;
-	font-size: 10px;
-}
-
-.sub-footer .footer-link {
-	color: #101330;
-	font-size: 14px;
-	line-height: 22px;
-	border: none;
-	background: 0 0;
-}
-
-.sub-footer:not(.sub-footer--full) .hidden-link {
-	display: none;
-}
-
-.sub-footer .footer-link--more {
-	padding: 0;
-	border-bottom: 1px solid #101330;
-	cursor: pointer;
-}
-
-.sub-footer .footer-link--more:before {
-	content: 'Show more';
-}
-
-.sub-footer.sub-footer--full .footer-link--more:before {
-	content: 'Show less';
-}
-
-.bottom-link {
-	margin-bottom: 16px;
-}
-
-.bottom-link .footer-link {
-	color: #20b69e;
-}

docs/_extra/css/feedback.css

@@ -57,4 +57,23 @@ This file contains the styling for the n8nFeedback.html partial
 
 .n8n-feedback-comment-hint {
     font-size: 0.75em;
+}
+
+#n8n-ratings-feedback {
+    display: flex; 
+    gap: 1em; 
+    align-items: center;
+}
+
+@media screen and (max-width: 475px) {
+
+#n8n-ratings-feedback {
+    display: flex;
+    flex-direction: column;
+}
+
+.n8n-feedback-button-positive, .n8n-feedback-button-negative {
+    min-width: 8.5em;
+}
+
 }