From bf6ac1f02c9be5716a90cd899e012daeeb009bcd Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Sat, 9 Dec 2023 17:28:05 +0100
Subject: [PATCH] Refactor .share-panel to .shr-panel because of iOS Safari
 quirk

---
 public/index.html                 |  2 +-
 public/scripts/ui.js              | 18 +++++++++---------
 public/styles/deferred-styles.css | 18 ++++++++++--------
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/public/index.html b/public/index.html
index 3c5817e..9b208cf 100644
--- a/public/index.html
+++ b/public/index.html
@@ -110,7 +110,7 @@
             <div data-i18n-key="instructions.no-peers-subtitle" data-i18n-attrs="text"></div>
         </x-no-peers>
         <x-instructions class="fade-in" data-i18n-key="instructions.x-instructions" data-i18n-attrs="desktop mobile data-drop-peer data-drop-bg"></x-instructions>
-        <div class="share-panel panel column" hidden>
+        <div class="shr-panel panel column" hidden>
             <div class="row">
                 <div class="thumb center">
                     <div class="text-thumb row" hidden>
diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index 5fb681d..89ff6a7 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -6,15 +6,15 @@ class PeersUI {
         this.$xInstructions = $$('x-instructions');
         this.$wsFallbackWarning = $('websocket-fallback');
 
-        this.$sharePanel = $$('.share-panel');
-        this.$shareModeImageThumb = $$('.share-panel .image-thumb');
-        this.$shareModeTextThumb = $$('.share-panel .text-thumb');
-        this.$shareModeFileThumb = $$('.share-panel .file-thumb');
-        this.$shareModeDescriptor = $$('.share-panel .share-descriptor');
-        this.$shareModeDescriptorItem = $$('.share-panel .descriptor-item');
-        this.$shareModeDescriptorOther = $$('.share-panel .descriptor-other');
-        this.$shareModeCancelBtn = $$('.share-panel .cancel-btn');
-        this.$shareModeEditBtn = $$('.share-panel .edit-btn');
+        this.$sharePanel = $$('.shr-panel');
+        this.$shareModeImageThumb = $$('.shr-panel .image-thumb');
+        this.$shareModeTextThumb = $$('.shr-panel .text-thumb');
+        this.$shareModeFileThumb = $$('.shr-panel .file-thumb');
+        this.$shareModeDescriptor = $$('.shr-panel .share-descriptor');
+        this.$shareModeDescriptorItem = $$('.shr-panel .descriptor-item');
+        this.$shareModeDescriptorOther = $$('.shr-panel .descriptor-other');
+        this.$shareModeCancelBtn = $$('.shr-panel .cancel-btn');
+        this.$shareModeEditBtn = $$('.shr-panel .edit-btn');
 
         this.peers = {};
 
diff --git a/public/styles/deferred-styles.css b/public/styles/deferred-styles.css
index becc55a..eb574f9 100644
--- a/public/styles/deferred-styles.css
+++ b/public/styles/deferred-styles.css
@@ -634,7 +634,9 @@ x-dialog .dialog-subheader {
     pointer-events: none;
 }
 
-.share-panel {
+/* Do not call it 'share-panel', 'share-pannel' or 'sharepanel' as iOS Safari does not show any element with these classnames... */
+
+.shr-panel {
     min-width: 250px;
     max-width: calc(100vw - 20px);
     overflow: hidden;
@@ -643,15 +645,15 @@ x-dialog .dialog-subheader {
     background-image: linear-gradient(225deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color) 60%, black) 100%);
 }
 
-.share-panel > div {
+.shr-panel > div {
     margin: 4px 2px;
 }
 
-.share-panel > div:not(:first-child) {
+.shr-panel > div:not(:first-child) {
     margin-top: 2px;
 }
 
-.share-panel .thumb > div {
+.shr-panel .thumb > div {
     width: 36px;
     height: 36px;
     background: white;
@@ -659,23 +661,23 @@ x-dialog .dialog-subheader {
     margin-right: 6px;
 }
 
-.share-panel .text-thumb svg {
+.shr-panel .text-thumb svg {
     width: 18px;
     height: 36px;
 }
 
-.share-panel .file-thumb svg {
+.shr-panel .file-thumb svg {
     width: 36px;
     height: 36px;
 }
 
-.share-panel .thumb .image-thumb {
+.shr-panel .thumb .image-thumb {
     background-size: cover;
     border-radius: 6px;
     background-position: center;
 }
 
-.share-panel .btn {
+.shr-panel .btn {
     height: 36px;
 }