fix: made web form and web list responsive

(cherry picked from commit 0889d9137f)

frappe/public/js/frappe/web_form/web_form_list.js

@@ -381,7 +381,7 @@ frappe.ui.WebFormListRow = class WebFormListRow {
 						formatter(this.doc[field.fieldname], field, { only_value: 1 }, this.doc)
 					)) ||
 				"";
-			let cell = $(`<td>${value}</td>`);
+			let cell = $(`<td><p class="ellipsis">${value}</p></td>`);
 			cell.appendTo(this.row);
 		});
 

frappe/public/scss/website/web_form.scss

@@ -23,6 +23,7 @@
 					font-size: 2.25rem;
 					margin-top: 0;
 					margin-bottom: 0;
+					padding-bottom: 2px;
 				}
 
 				.web-form-header {
@@ -49,6 +50,19 @@
 						.title {
 							display: flex;
 							justify-content: space-between;
+							flex-wrap: wrap;
+							gap: 1rem;
+
+							.web-form-actions {
+								display: flex;
+								align-items: center;
+								justify-content: flex-end;
+								flex: 1;
+
+								.btn {
+									font-size: var(--text-base);
+								}
+							}
 						}
 
 						.web-form-introduction {
@@ -95,7 +109,7 @@
 								padding-right: 0;
 							}
 
-							@include media-breakpoint-down(sm) {
+							@include media-breakpoint-down(xs) {
 								padding: 0;
 							}
 						}
@@ -135,6 +149,7 @@
 						.web-form-actions {
 							display: flex;
 							justify-content: space-between;
+							flex-wrap: wrap;
 
 							.btn {
 								font-size: var(--text-base);
@@ -152,6 +167,10 @@
 							.left-area {
 								display: flex;
 								flex: 1;
+
+								@include media-breakpoint-down(sm) {
+									order: 1
+								}
 							}
 
 							.center-area {
@@ -214,14 +233,30 @@
 												}
 											}
 										}
+
+										@include media-breakpoint-down(xs) {
+											width: 16px;
+											height: 16px;
+										}
 									}
 								}
+
+								@include media-breakpoint-down(sm) {
+									order: 0;
+									width: 100%;
+									justify-content: center;
+									margin-bottom: 1.5rem;
+								}
 							}
 
 							.right-area {
 								display: flex;
 								justify-content: flex-end;
 								flex: 1;
+
+								@include media-breakpoint-down(sm) {
+									order: 2
+								}
 							}
 						}
 					}
@@ -281,11 +316,16 @@
 					.web-list-header {
 						display: flex;
 						justify-content: space-between;
+						flex-wrap: wrap;
+						gap: 1rem;
 						border-bottom: 1px solid var(--dark-border-color);
 						padding-bottom: 1.25rem;
 
 						.web-list-actions {
-							align-self: center;
+							display: flex;
+							align-items: center;
+							justify-content: flex-end;
+							flex: 1;
 						}
 					}
 
@@ -345,6 +385,18 @@
 								td {
 									font-size: 13px;
 									border-top: 1px solid var(--border-color);
+
+									.ql-editor, p {
+										width: max-content;
+										max-width: 200px;
+										margin-bottom: 0;
+
+										p {
+											overflow: hidden;
+											white-space: nowrap;
+											text-overflow: ellipsis;
+										}
+									}
 								}
 							}
 
@@ -377,6 +429,11 @@
 						padding-left: 0;
 					}
 				}
+
+				@include media-breakpoint-down(lg) {
+					padding-left: 1.5rem;
+					padding-right: 1.5rem;
+				}
 			}
 
 			@include media-breakpoint-down(lg) {

frappe/website/doctype/web_form/templates/web_form.html

@@ -63,7 +63,9 @@
 			{% endif %}
 			<div class="web-form-head">
 				<div class="title">
-					<h1>{{ _(title) }}</h1>
+					<div class="web-form-title ellipsis">
+						<h1 class="ellipsis">{{ _(title) }}</h1>
+					</div>
 					<div class="web-form-actions">
 						{{ header_buttons() }}
 					</div>

frappe/website/doctype/web_form/templates/web_list.html

@@ -7,7 +7,9 @@
 	<div class="web-list-container">
 		<!-- list -->
 		<div class="web-list-header">
-			<h1>{{ _(list_title or title) }}</h1>
+			<div class="web-list-title ellipsis">
+				<h1 class="ellipsis">{{ _(list_title or title) }}</h1>
+			</div>
 			<div class="web-list-actions">
 				{%- if allow_multiple -%}
 					<a class="btn btn-primary btn-sm button-new" href="/{{ route }}/new">New</a>