From 2e58fa40e03aa2d5d614fbd8da097d4da77bcc66 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 24 Oct 2024 18:18:05 +0200
Subject: [PATCH] fix: cleanup styles

- remove publicshare.css as redundant
- keep footer in place, adjust width if talk sidebar is open

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 css/publicshare.css                | 75 ------------------------------
 lib/PublicShare/TemplateLoader.php |  1 -
 src/PublicShareSidebar.vue         |  8 ++--
 src/mainPublicShareSidebar.js      | 10 ----
 4 files changed, 5 insertions(+), 89 deletions(-)
 delete mode 100644 css/publicshare.css

diff --git a/css/publicshare.css b/css/publicshare.css
deleted file mode 100644
index 43249170220..00000000000
--- a/css/publicshare.css
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-/* Special layout to include the Talk sidebar */
-
-/* The standard layout defined in the server includes a fixed header with a
- * sticky sidebar. This causes the scroll bar for the main area to appear to the
- * right of the sidebar, which looks confusing for the chat. Thus that layout is
- * overridden with a static header and a content with full height without header
- * to limit the vertical scroll bar only to it.
- * Note that the flex layout can not be cascaded from the body element, as a
- * flex display is not compatible with the absolute position set for the
- * autocompletion panel, which is reparented to the body when shown. */
-#body-user #header,
-#body-public #header {
-	/* Override fixed position from server to include it in the body layout */
-	position: static;
-}
-
-#content.full-height {
-	/* Always full height without header. */
-	height: calc(100% - 50px);
-}
-
-#content {
-	display: flex;
-	flex-direction: row;
-	overflow: hidden;
-
-	flex-grow: 1;
-
-	/* Override "min-height: 100%" and "padding-top: 50px" set in server, as the
-	 * header is part of the flex layout and thus the whole body is not
-	 * available for the content. */
-	min-height: 0;
-	padding-top: 0;
-
-	/* Override margin used in server, as the header is part of the flex layout
-	 * and thus the content does not need to be pushed down. */
-	margin-top: 0;
-}
-
-#app-content {
-	position: relative;
-
-	display: flex;
-	flex-direction: column;
-	overflow-y: auto;
-	overflow-x: hidden;
-
-	flex-grow: 1;
-
-	margin-right: 0;
-}
-
-#files-public-content {
-	flex-grow: 1;
-}
-
-#content footer {
-	position: relative;
-}
-
-#content footer p a {
-	/* The server sets an height to the footer of 65px, but its contents are
-	 * slightly larger, which causes a scroll bar to be added to the content
-	 * even if there is enough space for the app content and the footer.
-	 * The padding of links is 10px, so in practice reducing the bottom padding
-	 * only affects the bottom padding of the last element (as in adjacent
-	 * paragraphs the paddings would get merged and there will still be 10px
-	 * from the top padding of the second element). */
-	padding-bottom: 8px;
-}
diff --git a/lib/PublicShare/TemplateLoader.php b/lib/PublicShare/TemplateLoader.php
index a705f6c86cb..906d9b67b80 100644
--- a/lib/PublicShare/TemplateLoader.php
+++ b/lib/PublicShare/TemplateLoader.php
@@ -74,7 +74,6 @@ public function handle(Event $event): void {
 		}
 
 		Util::addStyle(Application::APP_ID, 'icons');
-		Util::addStyle(Application::APP_ID, 'publicshare');
 		Util::addScript(Application::APP_ID, 'talk-public-share-sidebar');
 
 		$this->publishInitialStateForGuest();
diff --git a/src/PublicShareSidebar.vue b/src/PublicShareSidebar.vue
index 3997dc321f1..fc8558a5e6f 100644
--- a/src/PublicShareSidebar.vue
+++ b/src/PublicShareSidebar.vue
@@ -256,6 +256,10 @@ export default {
 body .modal-wrapper * {
 	box-sizing: border-box;
 }
+
+#content-vue:has(#talk-sidebar) ~ footer {
+	width: calc(100% - 2 * var(--body-container-margin) - clamp(300px, 27vw, 500px));
+}
 </style>
 
 <style lang="scss" scoped>
@@ -263,9 +267,7 @@ body .modal-wrapper * {
 #talk-sidebar {
 	position: relative;
 	flex-shrink: 0;
-	width: 27vw;
-	min-width: 300px;
-	max-width: 500px;
+	width: clamp(300px, 27vw, 500px);
 
 	background: var(--color-main-background);
 	border-left: 1px solid var(--color-border);
diff --git a/src/mainPublicShareSidebar.js b/src/mainPublicShareSidebar.js
index 0b229354b2a..250c894d0a5 100644
--- a/src/mainPublicShareSidebar.js
+++ b/src/mainPublicShareSidebar.js
@@ -42,18 +42,8 @@ Vue.use(Vuex)
 
 const pinia = createPinia()
 
-/**
- *
- */
-function adjustLayout() {
-	document.querySelector('#app-content').appendChild(document.querySelector('footer'))
-}
-
-adjustLayout()
-
 // An "isOpen" boolean should be passed to the component, but as it is a
 // primitive it would not be reactive; it needs to be wrapped in an object and
-
 // that object passed to the component to get reactivity.
 const sidebarState = reactive({
 	isOpen: false,