From dd82115791973e11a52eff19fd49fa63699c3712 Mon Sep 17 00:00:00 2001
From: Ben Silverman <ben@performantsoftware.com>
Date: Wed, 10 Jul 2024 15:08:23 -0400
Subject: [PATCH 1/9] Use self-hosted tinyMCE editor (#1615)

---
 package-lock.json                             | 11 +++++
 package.json                                  |  1 +
 .../js/controllers/annotation_controller.js   | 40 +++++++++++++++++++
 webpack.config.js                             | 24 ++++++++++-
 4 files changed, 75 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index e92936cc1..bddd89ff6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "sass-loader": "^12.1.0",
         "stimulus-use": "^0.50.0-2",
         "style-loader": "^3.2.1",
+        "tinymce": "^5.10.9",
         "webpack": "^5.51.1",
         "webpack-bundle-tracker": "^1.2.0",
         "webpack-cli": "^4.8.0"
@@ -8062,6 +8063,11 @@
       "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
       "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
     },
+    "node_modules/tinymce": {
+      "version": "5.10.9",
+      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.10.9.tgz",
+      "integrity": "sha512-5bkrors87X9LhYX2xq8GgPHrIgJYHl87YNs+kBcjQ5I3CiUgzo/vFcGvT3MZQ9QHsEeYMhYO6a5CLGGffR8hMg=="
+    },
     "node_modules/tinyqueue": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
@@ -15137,6 +15143,11 @@
       "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
       "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
     },
+    "tinymce": {
+      "version": "5.10.9",
+      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.10.9.tgz",
+      "integrity": "sha512-5bkrors87X9LhYX2xq8GgPHrIgJYHl87YNs+kBcjQ5I3CiUgzo/vFcGvT3MZQ9QHsEeYMhYO6a5CLGGffR8hMg=="
+    },
     "tinyqueue": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
diff --git a/package.json b/package.json
index a9d6c938b..d2dfc84b5 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "sass-loader": "^12.1.0",
     "stimulus-use": "^0.50.0-2",
     "style-loader": "^3.2.1",
+    "tinymce": "^5.10.9",
     "webpack": "^5.51.1",
     "webpack-bundle-tracker": "^1.2.0",
     "webpack-cli": "^4.8.0"
diff --git a/sitemedia/js/controllers/annotation_controller.js b/sitemedia/js/controllers/annotation_controller.js
index 068e6b028..0bb9fdac0 100644
--- a/sitemedia/js/controllers/annotation_controller.js
+++ b/sitemedia/js/controllers/annotation_controller.js
@@ -6,6 +6,17 @@ import {
     AnnotationServerStorage,
 } from "annotorious-tahqiq";
 
+// required imports for self-hosted tinyMCE
+import "tinymce/tinymce";
+import "tinymce/icons/default";
+import "tinymce/themes/silver";
+import "tinymce/plugins/lists";
+import contentUiCss from "tinymce/skins/ui/oxide/content.css";
+import contentCss from "tinymce/skins/content/default/content.css";
+import skinCss from "tinymce/skins/ui/oxide/skin.min.css";
+import skinShadowDomCss from "tinymce/skins/ui/oxide/skin.shadowdom.min.css";
+import skinContentCss from "tinymce/skins/ui/oxide/content.min.css";
+
 export default class extends Controller {
     static targets = ["image", "imageContainer"];
 
@@ -129,6 +140,35 @@ export default class extends Controller {
             config.tiny_api_key
         );
 
+        if (window.tinyConfig) {
+            // add extra tinyMCE configuration required for self-hosted instance
+            window.tinyConfig = {
+                ...window.tinyConfig,
+                // disable attempts to load tinyMCE css from CDN or server; load as modules insetad
+                skin: false,
+                content_css: false,
+                // use css modules for tinyMCE editor inner content style
+                content_style: `${contentUiCss} ${contentCss}
+                    ::marker { margin-left: 1em; }
+                    li { padding-right: 1em; } ins { color: gray; }`,
+                setup: (editor) => {
+                    editor.on("init", () => {
+                        // place imported CSS modules into <style> element inside shadow root.
+                        // (hacky but required to get self-hosted tinyMCE webcomponent to see CSS)
+                        const editorNode = editor.targetElm;
+                        if (!editorNode.parentNode.querySelector("style")) {
+                            const style = document.createElement("style");
+                            style.textContent = `${skinCss} ${skinContentCss} ${skinShadowDomCss}`;
+                            editorNode.parentNode.insertBefore(
+                                style,
+                                editorNode.nextSibling
+                            );
+                        }
+                    });
+                },
+            };
+        }
+
         // add some special handling to hide the OSD navigator while drawing
         anno.on("startSelection", () => this.setNavigatorVisible(false));
         anno.on("createSelection", () => this.setNavigatorVisible(true));
diff --git a/webpack.config.js b/webpack.config.js
index dd8f44b0d..856b4a5b9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -41,9 +41,21 @@ module.exports = (env, options) => ({
     },
     module: {
         rules: [
+            // load tinyMCE css as ES modules so we can use them in JS code
+            {
+                test: /(skin|content|shadowdom)(\.min)?\.css$/i,
+                use: [
+                    {
+                        loader: "css-loader",
+                        options: {
+                            esModule: true,
+                        },
+                    },
+                ],
+            },
             // styles configuration: handle .sass, .scss, .css files and apply autoprefixer
             {
-                test: /\.(sa|sc|c)ss$/,
+                test: /(?<!skin|content|shadowdom)(?<!\.min)\.(sa|sc|c)ss$/,
                 use: [
                     // extract all styles into a single file in prod; serve directly from memory in dev
                     options.mode == "production"
@@ -125,5 +137,15 @@ module.exports = (env, options) => ({
             "...", // shorthand; minify JS using the default TerserPlugin
             new CssMinimizerPlugin(), // also minify CSS
         ],
+        // chunking required for tinyMCE JS and CSS bundling
+        splitChunks: {
+            chunks: "all",
+            cacheGroups: {
+                tinymceVendor: {
+                    test: /[\/]node_moduleslink:tinymce[\/]link:.*js|.*skin.css[\/]|[\/]plugins[\/]/,
+                    name: "tinymce",
+                },
+            },
+        },
     },
 });

From 389a3729695f6c594a9063df9ced712c0afeb3fa Mon Sep 17 00:00:00 2001
From: Ben Silverman <ben@performantsoftware.com>
Date: Wed, 17 Jul 2024 12:26:20 -0400
Subject: [PATCH 2/9] bugfix: Prevent enter keypress from clicking (#1606)

---
 geniza/entities/templates/entities/person_list.html | 2 +-
 sitemedia/js/controllers/search_controller.js       | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/geniza/entities/templates/entities/person_list.html b/geniza/entities/templates/entities/person_list.html
index 36bbe8478..c188a3580 100644
--- a/geniza/entities/templates/entities/person_list.html
+++ b/geniza/entities/templates/entities/person_list.html
@@ -51,7 +51,7 @@ <h1>{{ page_title }}</h1>
                 </label>
                 <label for="{{ form.date_range.auto_id }}">
                     <span class="fieldname">{{ form.date_range.label }}</span>
-                    {% render_field form.date_range data-action="search#update" %}
+                    {% render_field form.date_range data-action="search#update keypress->search#handleDate" %}
                 </label>
             </div>
             <label for="{{ form.social_role.auto_id }}">
diff --git a/sitemedia/js/controllers/search_controller.js b/sitemedia/js/controllers/search_controller.js
index 7468fb944..10679d201 100644
--- a/sitemedia/js/controllers/search_controller.js
+++ b/sitemedia/js/controllers/search_controller.js
@@ -215,4 +215,12 @@ export default class extends Controller {
             }
         });
     }
+
+    preventEnterKeypress(e) {
+        // text input elements like the date range will try to click buttons in the form
+        // if Enter is pressed while they are focused, so prevent that behavior
+        if (e.key === "Enter") {
+            e.preventDefault();
+        }
+    }
 }

From 82d2e7c34a70afb05492b8c96c46b994151ea38b Mon Sep 17 00:00:00 2001
From: Ben Silverman <ben@performantsoftware.com>
Date: Fri, 19 Jul 2024 16:57:59 -0400
Subject: [PATCH 3/9] Improve highlighting for old shelfmark (#1469)

---
 geniza/corpus/solr_queryset.py                | 13 ++++++++++
 .../corpus/snippets/document_result.html      |  2 +-
 .../corpus/tests/test_corpus_solrqueryset.py  | 26 +++++++++++++++++++
 geniza/corpus/views.py                        |  1 +
 4 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/geniza/corpus/solr_queryset.py b/geniza/corpus/solr_queryset.py
index 9983ea21c..f4b7b47c1 100644
--- a/geniza/corpus/solr_queryset.py
+++ b/geniza/corpus/solr_queryset.py
@@ -76,6 +76,7 @@ class DocumentSolrQuerySet(AliasedSolrQuerySet):
         "has_digital_translation": "has_digital_translation_b",
         "has_discussion": "has_discussion_b",
         "old_shelfmark": "old_shelfmark_bigram",
+        "old_shelfmark_t": "old_shelfmark_t",
         "transcription_nostem": "transcription_nostem",
         "description_nostem": "description_nostem",
     }
@@ -277,4 +278,16 @@ def get_highlighting(self):
                 highlights[doc]["translation"] = [
                     clean_html(s) for s in highlights[doc]["translation"]
                 ]
+
+            # handle old shelfmark highlighting; sometimes it's on one or the other
+            # field, and sometimes one of the highlight results is empty
+            if "old_shelfmark" in highlights[doc]:
+                highlights[doc]["old_shelfmark"] = ", ".join(
+                    [h for h in highlights[doc]["old_shelfmark"] if h]
+                )
+            elif "old_shelfmark_t" in highlights[doc]:
+                highlights[doc]["old_shelfmark"] = ", ".join(
+                    [h for h in highlights[doc]["old_shelfmark_t"] if h]
+                )
+
         return highlights
diff --git a/geniza/corpus/templates/corpus/snippets/document_result.html b/geniza/corpus/templates/corpus/snippets/document_result.html
index eb7fcc1bd..36cd9e270 100644
--- a/geniza/corpus/templates/corpus/snippets/document_result.html
+++ b/geniza/corpus/templates/corpus/snippets/document_result.html
@@ -31,7 +31,7 @@ <h2 class="title">
                     {% if document_highlights.old_shelfmark %}
                         {# Translators: label for historical/old shelfmark on document fragments #}
                         <dt>{% translate "Historical shelfmark" %}</dt>
-                        <dd>{{ document_highlights.old_shelfmark.0|striptags }}</dd>
+                        <dd>{{ document_highlights.old_shelfmark|striptags }}</dd>
                     {% endif %}
                 {% endwith %}
                 {# Translators: Date document was first added to the PGP #}
diff --git a/geniza/corpus/tests/test_corpus_solrqueryset.py b/geniza/corpus/tests/test_corpus_solrqueryset.py
index fb7c7267c..5c8005bf9 100644
--- a/geniza/corpus/tests/test_corpus_solrqueryset.py
+++ b/geniza/corpus/tests/test_corpus_solrqueryset.py
@@ -297,3 +297,29 @@ def test_get_highlighting__exact_search(self):
             assert dqs.get_highlighting()["doc.1"]["transcription"][0] == clean_html(
                 "exact match"
             )
+
+    def test_get_highlighting__old_shelfmark(self):
+        dqs = DocumentSolrQuerySet()
+        with patch("geniza.corpus.solr_queryset.super") as mock_super:
+            mock_get_highlighting = mock_super.return_value.get_highlighting
+            test_highlight = {
+                "doc.1": {
+                    # typical formatting for an old_shelfmark highlight
+                    "old_shelfmark": ["", "matched", "secondmatch"],
+                }
+            }
+            mock_get_highlighting.return_value = test_highlight
+            # should flatten list with comma separation
+            assert (
+                dqs.get_highlighting()["doc.1"]["old_shelfmark"]
+                == "matched, secondmatch"
+            )
+
+            test_highlight = {
+                "doc.1": {
+                    "old_shelfmark_t": ["", "matched"],
+                }
+            }
+            mock_get_highlighting.return_value = test_highlight
+            # should use old_shelfmark_t highlight
+            assert dqs.get_highlighting()["doc.1"]["old_shelfmark"] == "matched"
diff --git a/geniza/corpus/views.py b/geniza/corpus/views.py
index 3d9f2c28a..55cea70eb 100644
--- a/geniza/corpus/views.py
+++ b/geniza/corpus/views.py
@@ -221,6 +221,7 @@ def get_queryset(self):
                     )
                     # highlight old shelfmark so we can show match in results
                     .highlight("old_shelfmark", requireFieldMatch=True)
+                    .highlight("old_shelfmark_t", requireFieldMatch=True)
                     .also("score")
                 )  # include relevance score in results
 

From c1a3f86c1d601f26fbf18c6e7a837d6b28e78684 Mon Sep 17 00:00:00 2001
From: Ben Silverman <ben@performantsoftware.com>
Date: Mon, 22 Jul 2024 19:58:43 -0400
Subject: [PATCH 4/9] Implement document detail page redesign (#1621)

---
 .../templates/corpus/document_detail.html     |  65 ++++----
 .../corpus/snippets/document_tabs.html        |  30 ++--
 .../snippets/document_transcription.html      |   8 +-
 sitemedia/scss/base/_typography.scss          |  16 +-
 sitemedia/scss/components/_docheader.scss     |   6 +-
 sitemedia/scss/components/_tabs.scss          |  38 ++++-
 sitemedia/scss/components/_transcription.scss |  15 +-
 sitemedia/scss/pages/_document.scss           | 148 +++++++-----------
 sitemedia/scss/pages/_person.scss             | 115 +++++---------
 9 files changed, 220 insertions(+), 221 deletions(-)

diff --git a/geniza/corpus/templates/corpus/document_detail.html b/geniza/corpus/templates/corpus/document_detail.html
index 7e84eb279..fdc154465 100644
--- a/geniza/corpus/templates/corpus/document_detail.html
+++ b/geniza/corpus/templates/corpus/document_detail.html
@@ -123,6 +123,12 @@ <h2 class="sr-only">
             </dl>
         </section>
 
+        <section class="description">
+            {# Translators: label for document description #}
+            <h2>{% translate 'Description' %}</h2>
+            <p>{{ document.description|pgp_urlize }}</p>
+        </section>
+
         {% if document.tags.exists %}
             <section>
                 {# Translators: label for tags on a document #}
@@ -136,51 +142,44 @@ <h2 class="sr-only">{% translate 'Tags' %}</h2>
                 </ul>
             </section>
         {% endif %}
-
-        <section class="extra-metadata">
-            <h2 class="sr-only">
-                {# Translators: label for secondary/historiographical metadata #}
-                {% translate 'Additional metadata' %}
-            </h2>
-            <dl>
-                {% if document.fragment_historical_shelfmarks %}
-                {# Translators: label for historical/old shelfmarks on document fragments #}
-                    <dt>{% translate 'Historical shelfmarks' %}</dt>
-                    <dd>{{ document.fragment_historical_shelfmarks }}</dd>
-                {% endif %}
-                {# Translators: Label for date document was first added to the PGP #}
-                <dt>{% translate 'Input date' %}</dt>
-                <dd>
-                    {# Translators: Date document was first added to the PGP #}
-                    {% blocktranslate with date=document.log_entries.last.action_time.year %}
-                        In PGP since {{ date }}
-                    {% endblocktranslate %}
-                </dd>
-            </dl>
-        </section>
-
-        <section class="description">
-            <h2>
-                {# Translators: label for document description #}
-                {% translate 'Description' %}
-            </h2>
-            <p>{{ document.description|pgp_urlize }}</p>
-        </section>
     </div>
 
+    <section class="extra-metadata">
+        <h2 class="sr-only">
+            {# Translators: label for secondary/historiographical metadata #}
+            {% translate 'Additional metadata' %}
+        </h2>
+        <dl>
+            {% if document.fragment_historical_shelfmarks %}
+            {# Translators: label for historical/old shelfmarks on document fragments #}
+                <dt>{% translate 'Historical shelfmarks' %}</dt>
+                <dd>{{ document.fragment_historical_shelfmarks }}</dd>
+            {% endif %}
+            {# Translators: Label for date document was first added to the PGP #}
+            <dt>{% translate 'Input date' %}</dt>
+            <dd>
+                {# Translators: Date document was first added to the PGP #}
+                {% blocktranslate with date=document.log_entries.last.action_time.year %}
+                    In PGP since {{ date }}
+                {% endblocktranslate %}
+            </dd>
+        </dl>
+    </section>
+
     {# viewer #}
     {% include "corpus/snippets/document_transcription.html" %}
 
     {# tertiary metadata #}
     <dl class="metadata-list tertiary">
         {# Translators: label for permanent link to a document #}
-        {% translate 'Permalink' as permalink %}
+        {% translate 'Link to this document:' as permalink %}
         <dt id="permalink" aria-hidden="true"> {# aria hidden because redundant for screen readers #}
-            <svg role="presentation"><use xlink:href="{% static 'img/ui/all/all/permalink-icon.svg' %}#permalink-icon" /></svg>
+            <i class="ph-link"></i>
             {{ permalink }}
         </dt>
         <dd>
-            <a href="{{ document.permalink }}" rel="bookmark" aria-label="{{ permalink }}">
+            {# Translators: accessibility label for permanent link to a document #}
+            <a href="{{ document.permalink }}" rel="bookmark" aria-label="{% translate 'Permalink' %}">
                 {{ document.permalink }}
             </a>
         </dd>
diff --git a/geniza/corpus/templates/corpus/snippets/document_tabs.html b/geniza/corpus/templates/corpus/snippets/document_tabs.html
index 9b8feb1ef..5594d916b 100644
--- a/geniza/corpus/templates/corpus/snippets/document_tabs.html
+++ b/geniza/corpus/templates/corpus/snippets/document_tabs.html
@@ -2,21 +2,31 @@
 <!-- document detail page navigation -->
 {# Translators: accessibility text label for document detail view tabs navigation #}
 <nav aria-label="{% translate "tabs" %}" id="tabs">
-    <ul class="tabs">
-        {% url 'corpus:document' pk=document.pk as document_url %}
-        <li><a href="{{ document_url }}"{% if request.path == document_url %} aria-current="page"{% endif %}>{% translate "Document Details" %}</a></li>
-        {% with n_records=document.sources|length %}
+    {% with n_records=document.sources|length n_reldocs=document.related_documents.count %}
+        <ul class="tabs">
+            {% url 'corpus:document' pk=document.pk as document_url %}
+            {% translate "Document Details" as details_text %}
+            <li><a href="{{ document_url }}"{% if request.path == document_url %} aria-current="page"{% endif %}>{{ details_text }}</a></li>
             {# Translators: n_records is number of scholarship records #}
             {% blocktranslate asvar srec_text %}Scholarship Records ({{ n_records }}){% endblocktranslate %}
             {% url 'corpus:document-scholarship' pk=document.pk as scholarship_url %}
             <li>{% if n_records > 0 %}<a href="{{ scholarship_url }}"{% if request.path == scholarship_url %} aria-current="page"{% endif %}>{{ srec_text }}</a>{% else %}<span disabled aria-disabled="true">{{ srec_text }}</span>{% endif %}</li>
-        {% endwith %}
-
-        {# Translators: n_reldocs is number of related documents #}
-        {% with n_reldocs=document.related_documents.count %}
+            {# Translators: n_reldocs is number of related documents #}
             {% blocktranslate asvar reldoc_text %}Related Documents ({{ n_reldocs }}){% endblocktranslate %}
             {% url 'corpus:related-documents' pk=document.pk as reldoc_url %}
             <li>{% if n_reldocs > 0 %}<a href="{{ reldoc_url }}"{% if request.path == reldoc_url %} aria-current="page"{% endif %}>{{ reldoc_text }}</a>{% else %}<span disabled aria-disabled="true">{{ reldoc_text }}</span>{% endif %}</li>
-        {% endwith %}
-    </ul>
+        </ul>
+        {# select dropdown for mobile only #}
+        <select class="mobile-select" data-controller="menu" data-action="change->menu#changePage">
+            <option value="{{ document_url }}"{% if request.path == document_url %} selected{% endif %}>
+                {{ details_text }}
+            </option>
+            <option value="{{ scholarship_url }}"{% if n_records == 0 %} disabled{% elif request.path == scholarship_url %} selected{% endif %}>
+                {{ srec_text }}
+            </option>
+            <option value="{{ reldoc_url }}"{% if n_reldocs == 0 %} disabled{% elif request.path == reldoc_url %} selected{% endif %}>
+                {{ reldoc_text }}
+            </option>
+        </select>
+    {% endwith %}
 </nav>
diff --git a/geniza/corpus/templates/corpus/snippets/document_transcription.html b/geniza/corpus/templates/corpus/snippets/document_transcription.html
index 2d4debcf3..dc4b40c4d 100644
--- a/geniza/corpus/templates/corpus/snippets/document_transcription.html
+++ b/geniza/corpus/templates/corpus/snippets/document_transcription.html
@@ -4,7 +4,7 @@
 {% elif perms.corpus.change_document %}
     {% for ed in document.digital_editions.all %}
         {# TODO: Make machine learning model editions editable once line-level editing implemented #}
-        <a class="editor-navigation" href="{% url 'corpus:document-transcribe' document.id ed.source.pk %}" data-turbo="false">
+        <a class="editor-add" href="{% url 'corpus:document-transcribe' document.id ed.source.pk %}" data-turbo="false">
             <i class="ph-pencil"></i>
             {% if not 'model' in ed.source.source_type.type %}
                 <span>Edit {% for auth in ed.source.authorship_set.all %}{% include "snippets/comma.html" %}{{ auth.creator.last_name }}{% empty %}[unknown]{% endfor %}'s edition</span>
@@ -14,17 +14,17 @@
         </a>
     {% endfor %}
     {% for tr in document.digital_translations.all %}
-        <a class="editor-navigation" href="{% url 'corpus:document-translate' document.id tr.source.pk %}" data-turbo="false">
+        <a class="editor-add" href="{% url 'corpus:document-translate' document.id tr.source.pk %}" data-turbo="false">
             <i class="ph-pencil"></i>
             <span>Edit {% for auth in tr.source.authorship_set.all %}{% include "snippets/comma.html" %}{{ auth.creator.last_name }}{% empty %}[unknown]{% endfor %}'s translation</span>
         </a>
     {% endfor %}
     {% if document.id %}
-        <a class="editor-navigation" href="{% url 'corpus:document-add-transcription' document.id %}" data-turbo="false">
+        <a class="editor-add" href="{% url 'corpus:document-add-transcription' document.id %}" data-turbo="false">
             <i class="ph-plus-circle"></i>
             <span>Add a new transcription</span>
         </a>
-        <a class="editor-navigation" href="{% url 'corpus:document-add-translation' document.id %}" data-turbo="false">
+        <a class="editor-add" href="{% url 'corpus:document-add-translation' document.id %}" data-turbo="false">
             <i class="ph-plus-circle"></i>
             <span>Add a new translation</span>
         </a>
diff --git a/sitemedia/scss/base/_typography.scss b/sitemedia/scss/base/_typography.scss
index 2ebf0c69d..6fa57d567 100644
--- a/sitemedia/scss/base/_typography.scss
+++ b/sitemedia/scss/base/_typography.scss
@@ -26,10 +26,10 @@ $text-size-7xl: 2.25rem; //  = 36px
 @mixin headline-1 {
     font-family: fonts.$primary-bold;
     font-weight: bold;
-    font-size: $text-size-3xl;
+    font-size: $text-size-2xl;
     line-height: 1.5;
     @include breakpoints.for-tablet-landscape-up {
-        font-size: $text-size-4xl;
+        font-size: $text-size-3xl;
         line-height: calc(40 / 28);
     }
 }
@@ -128,9 +128,9 @@ $text-size-7xl: 2.25rem; //  = 36px
 // on generic content pages
 @mixin body {
     font-family: fonts.$primary;
-    font-size: $text-size-lg;
+    font-size: $text-size-md;
     @include breakpoints.for-tablet-landscape-up {
-        font-size: $text-size-xl;
+        font-size: $text-size-lg;
     }
     line-height: 1.5;
 }
@@ -234,6 +234,14 @@ $text-size-7xl: 2.25rem; //  = 36px
     font-family: fonts.$primary-bold;
     font-weight: bold;
 }
+@mixin meta-header {
+    font-family: fonts.$primary-bold;
+    font-weight: bold;
+    font-size: $text-size-md;
+    @include breakpoints.for-tablet-landscape-up {
+        font-size: $text-size-xl;
+    }
+}
 
 // related documents and entities tables typography
 @mixin related-table {
diff --git a/sitemedia/scss/components/_docheader.scss b/sitemedia/scss/components/_docheader.scss
index 469bf334e..61d4bc395 100644
--- a/sitemedia/scss/components/_docheader.scss
+++ b/sitemedia/scss/components/_docheader.scss
@@ -19,9 +19,11 @@ span#formatted-title {
         user-select: all; // allow one-click select
         @include typography.shelfmark;
     }
-    margin: spacing.$spacing-xl spacing.$spacing-md spacing.$spacing-md;
+    margin: 2rem spacing.$spacing-md spacing.$spacing-md;
+    font-size: typography.$text-size-xl;
     @include breakpoints.for-tablet-landscape-up {
-        margin: spacing.$spacing-3xl spacing.$spacing-md spacing.$spacing-2xl;
+        margin: 3.5rem spacing.$spacing-md 2rem;
+        font-size: typography.$text-size-3xl;
     }
 }
 // Hebrew variant
diff --git a/sitemedia/scss/components/_tabs.scss b/sitemedia/scss/components/_tabs.scss
index aa52cb89f..c18de9a1b 100644
--- a/sitemedia/scss/components/_tabs.scss
+++ b/sitemedia/scss/components/_tabs.scss
@@ -8,15 +8,43 @@
 @use "../base/typography";
 
 nav#tabs {
-    max-width: 60ch;
-    padding: spacing.$spacing-md spacing.$spacing-md 0;
+    max-width: none;
+    width: 100%;
+    padding: 0 1rem 0;
+    // hide tabs on mobile
+    .tabs {
+        display: none;
+    }
+    // show <select> on mobile instead
+    .mobile-select {
+        max-width: 100vw;
+        display: block;
+        width: 100%;
+        height: 2.5rem;
+        @include typography.meta;
+        background-color: var(--background-light);
+        color: var(--on-background);
+        border-radius: 5px;
+        border: 1px solid var(--background-gray);
+        padding: 0 1rem;
+    }
+    @include breakpoints.for-tablet-landscape-up {
+        box-sizing: content-box;
+        max-width: 896px;
+        .tabs {
+            display: grid;
+        }
+        .mobile-select {
+            display: none;
+        }
+    }
 }
 .tabs {
     display: grid;
     // on mobile, ensure third tab has enough space
     grid-template-columns: 0.9fr 0.9fr 1.2fr;
     @include breakpoints.for-tablet-landscape-up {
-        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-columns: 33% 33% 1fr;
     }
     align-content: stretch;
     justify-content: center;
@@ -35,8 +63,8 @@ nav#tabs {
         padding-bottom: spacing.$spacing-xs;
         border-bottom: 4px solid var(--tabs-bottom);
         @include breakpoints.for-tablet-landscape-up {
-            padding-left: spacing.$spacing-xl;
-            padding-right: spacing.$spacing-xl;
+            padding-left: 6rem;
+            padding-right: 6rem;
         }
     }
     // Link-specific tabs styling
diff --git a/sitemedia/scss/components/_transcription.scss b/sitemedia/scss/components/_transcription.scss
index 246ae61b8..c6eb2e32c 100644
--- a/sitemedia/scss/components/_transcription.scss
+++ b/sitemedia/scss/components/_transcription.scss
@@ -8,6 +8,10 @@
 @use "../components/searchform";
 
 #itt-panel {
+    * {
+        max-width: 100vw;
+    }
+    margin-top: 5.125rem;
     max-width: 100vw;
     overflow: hidden;
     width: 100%;
@@ -1291,15 +1295,24 @@
         }
     }
 }
-.editor-navigation {
+.editor-navigation,
+.editor-add {
     span {
         @include typography.link;
     }
     i {
         text-decoration: none;
     }
+}
+.editor-navigation {
     margin: -1rem 0 2rem;
 }
+.editor-add {
+    margin: 0 0 1rem;
+}
+.editor-add + #itt-panel {
+    margin-top: 2rem;
+}
 
 // general transcription/translation styles
 // appear in ITT viewer and in search results
diff --git a/sitemedia/scss/pages/_document.scss b/sitemedia/scss/pages/_document.scss
index b84217d5d..c08f37ecc 100644
--- a/sitemedia/scss/pages/_document.scss
+++ b/sitemedia/scss/pages/_document.scss
@@ -8,21 +8,34 @@
 @use "../base/spacing";
 @use "../base/typography";
 
+@mixin meta-marker {
+    // marker next to metadata headings
+    content: " ";
+    display: inline-block;
+    width: 8px;
+    height: 18px;
+    background-color: var(--secondary);
+    margin-right: 12px;
+}
+
 main.document {
+    max-width: 100vw;
+    @include breakpoints.for-tablet-landscape-up {
+        box-sizing: content-box;
+        * {
+            max-width: 896px;
+        }
+    }
     // Primary container
     .container {
         display: flex;
         flex-direction: column;
-        padding: 0 spacing.$spacing-md spacing.$spacing-md;
-        margin-bottom: spacing.$spacing-md;
-        @include breakpoints.for-tablet-landscape-up {
-            margin-bottom: spacing.$spacing-xl;
-        }
+        padding: 0 spacing.$spacing-md 0;
         section.metadata {
             display: flex;
             flex-direction: column;
             @include breakpoints.for-tablet-landscape-up {
-                margin-top: spacing.$spacing-3xl;
+                margin-top: 2.5rem;
                 flex-direction: row;
                 justify-content: flex-start;
             }
@@ -31,31 +44,20 @@ main.document {
         dl.metadata-list {
             display: flex;
             flex-direction: column;
-            margin: spacing.$spacing-2xl spacing.$spacing-md 0;
+            margin: 1.375rem 0 0;
             @include typography.meta;
             @include breakpoints.for-tablet-landscape-up {
                 flex: 1 1 50%;
                 padding-right: 0;
                 margin: 0 0 0;
             }
-            // Lighter color metadata; secondary class on dl or dd/dt
-            .tertiary,
-            &.tertiary dd,
-            &.tertiary dt {
-                color: var(--on-background-alt);
-            }
             dt {
                 margin-bottom: spacing.$spacing-3xs;
-                @include typography.meta-bold;
+                @include typography.meta-header;
                 display: flex;
                 align-items: center;
                 &::before {
-                    content: " ";
-                    display: inline-block;
-                    width: 8px;
-                    height: 18px;
-                    background-color: var(--filter-active);
-                    margin-right: 12px;
+                    @include meta-marker;
                 }
             }
             dd {
@@ -77,7 +79,7 @@ main.document {
                 margin-left: 35px;
             }
             :first-child {
-                margin-top: spacing.$spacing-sm;
+                margin-top: spacing.$spacing-md;
                 @include breakpoints.for-tablet-landscape-up {
                     margin-top: 0px;
                 }
@@ -85,42 +87,40 @@ main.document {
         }
         // Document tags
         ul.tags {
-            margin: 45px spacing.$spacing-md 0;
+            margin: 2rem 0 0;
             align-self: flex-start;
             text-align: left;
+            border-bottom: 1px solid var(--disabled);
+            padding-bottom: 2rem;
             @include breakpoints.for-tablet-landscape-up {
                 flex: 1 0 100%;
                 padding-left: 0;
-                margin: spacing.$spacing-3xl 0 0;
+                margin: 2rem 0 0;
                 align-self: flex-start;
                 margin-left: 0;
-            }
-        }
-        // Additional metadata section, like input date ("In PGP since") and historical shelfmark
-        section.extra-metadata {
-            margin: 12px spacing.$spacing-md 0;
-            @include breakpoints.for-tablet-landscape-up {
-                margin: 12px 0 0;
-            }
-            @include typography.meta;
-            color: var(--extra-metadata-text);
-            dl {
-                display: grid;
-                grid-template-columns: 3fr 7fr;
-                dt {
-                    font-weight: bold;
-                }
+                padding: 0 spacing.$spacing-md 2rem;
             }
         }
         // "Description" header and content
         section.description {
-            margin: 64px 0 spacing.$spacing-md;
+            padding-bottom: 2rem;
+            margin: spacing.$spacing-md 0 0;
+            border-bottom: 1px solid var(--disabled);
+            @include breakpoints.for-tablet-landscape-up {
+                margin: 2rem 0 0;
+            }
             h2 {
-                @include typography.body-bold;
+                @include typography.meta-header;
+                display: flex;
+                align-items: center;
+                margin: 0;
+                &::before {
+                    @include meta-marker;
+                }
             }
-
             p {
                 white-space: pre-line;
+                padding-left: 1.25rem;
             }
         }
         // link to download transcription
@@ -132,39 +132,25 @@ main.document {
         }
     }
     dl.metadata-list.tertiary {
-        margin-top: 51px;
-        padding: 0 20px;
+        padding: 0 1rem;
+    }
+    // Additional metadata section, like input date ("In PGP since") and historical shelfmark
+    section.extra-metadata {
         width: 100%;
+        padding: 0 spacing.$spacing-md;
+        margin: 2rem 0;
         @include breakpoints.for-tablet-landscape-up {
-            margin-top: 53px;
-            max-width: none;
-            padding: 0 10rem;
+            width: 896px;
+            margin: 2rem 0;
         }
-        // extra style for hiding the theme toggle on desktop only
-        @include breakpoints.for-desktop-up {
-            z-index: 3;
-            background-color: var(--background);
-            margin-top: 0;
-            margin-bottom: -120px;
-            padding: 53px 10rem 120px;
-        }
-        // hanging "link" phosphor icon before permalink label
-        dt#permalink {
-            display: flex;
-            align-items: center;
-            @include typography.meta-bold;
-            svg {
-                color: var(--permalink-icon);
-                fill: var(--permalink-icon-bg);
-                width: 22px;
-                height: 22px;
-                margin-right: 12px;
-            }
-            & + dd {
-                margin-left: 34px;
-                a {
-                    text-decoration: none;
-                }
+        @include typography.body;
+        color: var(--extra-metadata-text);
+        dl {
+            display: grid;
+            grid-template-columns: 3fr 7fr;
+            gap: 0.75rem;
+            dt {
+                @include typography.body-bold;
             }
         }
     }
@@ -180,24 +166,6 @@ main.document {
     }
 }
 
-// RTL variant
-html[dir="rtl"] main.document {
-    .container dl.metadata-list dt::before {
-        margin-right: 0;
-        margin-left: 12px;
-    }
-    dl.metadata-list.tertiary dt#permalink {
-        svg {
-            margin-right: 0;
-            margin-left: 12px;
-        }
-        & + dd {
-            margin-left: 0;
-            margin-right: 34px;
-        }
-    }
-}
-
 // Hebrew variant
 html[lang="he"] main.document {
     .container section.description h3 {
diff --git a/sitemedia/scss/pages/_person.scss b/sitemedia/scss/pages/_person.scss
index c8fee03c8..eb652b676 100644
--- a/sitemedia/scss/pages/_person.scss
+++ b/sitemedia/scss/pages/_person.scss
@@ -96,12 +96,6 @@ main.place {
                 padding-right: 0;
                 margin: 0 0 0;
             }
-            // Lighter color metadata; secondary class on dl or dd/dt
-            .tertiary,
-            &.tertiary dd,
-            &.tertiary dt {
-                color: var(--on-background-alt);
-            }
             dd {
                 margin-left: 20px;
             }
@@ -187,69 +181,48 @@ main.place {
             }
         }
     }
-    nav#tabs {
-        max-width: none;
-        width: 100%;
-        padding: 0 1rem 0;
-        // hide tabs on mobile
-        .tabs {
-            display: none;
+}
+main.person,
+main.place,
+main.document {
+    dl.metadata-list {
+        // Lighter color metadata; secondary class on dl or dd/dt
+        &.tertiary,
+        &.tertiary dd,
+        &.tertiary dt {
+            color: var(--on-background-alt);
         }
-        // show <select> on mobile instead
-        .mobile-select {
-            max-width: none;
-            display: block;
+        &.tertiary {
+            margin-top: 2rem;
             width: 100%;
-            height: 2.5rem;
-            @include typography.meta;
-            background-color: var(--background-light);
-            color: var(--on-background);
-            border-radius: 5px;
-            border: 1px solid var(--background-gray);
-            padding: 0 1rem;
-        }
-        @include breakpoints.for-tablet-landscape-up {
-            box-sizing: content-box;
-            max-width: 896px;
-            padding: 1rem 1rem 0;
-            .tabs {
-                display: grid;
-            }
-            .mobile-select {
-                display: none;
+            @include breakpoints.for-tablet-landscape-up {
+                margin-top: 3rem;
             }
-        }
-    }
-    dl.metadata-list.tertiary {
-        margin-top: 2rem;
-        width: 100%;
-        @include breakpoints.for-tablet-landscape-up {
-            margin-top: 3rem;
-        }
-        // hanging phosphor icons before citation and permalink
-        dt#citation,
-        dt#permalink {
-            display: flex;
-            align-items: flex-start;
-            @include typography.meta-bold;
-            line-height: 1;
-            i {
+            // hanging phosphor icons before citation and permalink
+            dt#citation,
+            dt#permalink {
                 display: flex;
-                align-items: center;
-                justify-content: center;
-                color: var(--on-secondary);
-                background-color: var(--secondary);
-                border-radius: 50%;
-                width: 2.25rem;
-                height: 2.25rem;
-                margin-right: 0.75rem;
-            }
-            & + dd {
-                @include typography.meta;
-                margin-left: 3rem;
-                margin-top: -1rem;
-                a {
-                    text-decoration: none;
+                align-items: flex-start;
+                @include typography.meta-bold;
+                line-height: 1;
+                i {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: var(--on-secondary);
+                    background-color: var(--secondary);
+                    border-radius: 50%;
+                    width: 2.25rem;
+                    height: 2.25rem;
+                    margin-right: 0.75rem;
+                }
+                & + dd {
+                    @include typography.meta;
+                    margin-left: 3rem;
+                    margin-top: -1rem;
+                    a {
+                        text-decoration: none;
+                    }
                 }
             }
         }
@@ -316,17 +289,15 @@ main.person {
 
 // RTL overrides
 html[dir="rtl"] main.person,
-html[dir="rtl"] main.place {
-    .container dl.metadata-list dt::before {
-        margin-right: 0;
-        margin-left: 12px;
-    }
+html[dir="rtl"] main.place,
+html[dir="rtl"] main.document {
+    .container dl.metadata-list dt::before,
     .container .description h2::before {
         margin-right: 0;
         margin-left: 12px;
     }
-    .container dl.metadata-list.tertiary dt#citation,
-    .container dl.metadata-list.tertiary dt#permalink {
+    dl.metadata-list.tertiary dt#citation,
+    dl.metadata-list.tertiary dt#permalink {
         i {
             margin-right: 0;
             margin-left: 0.75rem;

From 45452ea3bd27ca550703176f0fc300c1cb96152f Mon Sep 17 00:00:00 2001
From: Ben Silverman <ben@performantsoftware.com>
Date: Mon, 22 Jul 2024 20:12:20 -0400
Subject: [PATCH 5/9] Add aria labels to <select> elements (#1621)

---
 geniza/corpus/templates/corpus/snippets/document_tabs.html   | 3 ++-
 geniza/entities/templates/entities/snippets/person_tabs.html | 3 ++-
 geniza/entities/templates/entities/snippets/place_tabs.html  | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/geniza/corpus/templates/corpus/snippets/document_tabs.html b/geniza/corpus/templates/corpus/snippets/document_tabs.html
index 5594d916b..afe1e69f0 100644
--- a/geniza/corpus/templates/corpus/snippets/document_tabs.html
+++ b/geniza/corpus/templates/corpus/snippets/document_tabs.html
@@ -17,7 +17,8 @@
             <li>{% if n_reldocs > 0 %}<a href="{{ reldoc_url }}"{% if request.path == reldoc_url %} aria-current="page"{% endif %}>{{ reldoc_text }}</a>{% else %}<span disabled aria-disabled="true">{{ reldoc_text }}</span>{% endif %}</li>
         </ul>
         {# select dropdown for mobile only #}
-        <select class="mobile-select" data-controller="menu" data-action="change->menu#changePage">
+        {# Translators: accessibility text label for document navigation on mobile devices #}
+        <select aria-label="{% translate "page select" %}" class="mobile-select" data-controller="menu" data-action="change->menu#changePage">
             <option value="{{ document_url }}"{% if request.path == document_url %} selected{% endif %}>
                 {{ details_text }}
             </option>
diff --git a/geniza/entities/templates/entities/snippets/person_tabs.html b/geniza/entities/templates/entities/snippets/person_tabs.html
index 3568b2fc3..1e827cc7f 100644
--- a/geniza/entities/templates/entities/snippets/person_tabs.html
+++ b/geniza/entities/templates/entities/snippets/person_tabs.html
@@ -25,7 +25,8 @@
             <li>{% if n_relplaces > 0 %}<a href="{{ relplace_url }}"{% if request.path == relplace_url %} aria-current="page"{% endif %} data-turbo="false">{{ relplace_text }}</a>{% else %}<span disabled aria-disabled="true">{{ relplace_text }}</span>{% endif %}</li>
         </ul>
         {# select dropdown for mobile only #}
-        <select class="mobile-select" data-controller="menu" data-action="change->menu#changePage">
+        {# Translators: accessibility text label for person pages navigation on mobile devices #}
+        <select aria-label="{% translate "page select" %}" class="mobile-select" data-controller="menu" data-action="change->menu#changePage">
             <option value="{{ person_url }}"{% if request.path == person_url %} selected{% endif %}>
                 {{ details_text }}
             </option>
diff --git a/geniza/entities/templates/entities/snippets/place_tabs.html b/geniza/entities/templates/entities/snippets/place_tabs.html
index 44e1043f8..5f65d2a61 100644
--- a/geniza/entities/templates/entities/snippets/place_tabs.html
+++ b/geniza/entities/templates/entities/snippets/place_tabs.html
@@ -19,7 +19,8 @@
             <li>{% if n_relpeople > 0 %}<a href="{{ relpeople_url }}"{% if request.path == relpeople_url %} aria-current="page"{% endif %}>{{ relpeople_text }}</a>{% else %}<span disabled aria-disabled="true">{{ relpeople_text }}</span>{% endif %}</li>
         </ul>
         {# select dropdown for mobile only #}
-        <select class="mobile-select" data-controller="menu" data-action="change->menu#changePage">
+        {# Translators: accessibility text label for place pages navigation on mobile devices #}
+        <select aria-label="{% translate "page select" %}" class="mobile-select" data-controller="menu" data-action="change->menu#changePage">
             <option value="{{ place_url }}"{% if request.path == place_url %} selected{% endif %}>
                 {{ details_text }}
             </option>

From ab5a94dd75aaaa24dda3a2e2d7280ddb97c6353b Mon Sep 17 00:00:00 2001
From: Ben Silverman <ben@performantsoftware.com>
Date: Tue, 23 Jul 2024 12:52:15 -0400
Subject: [PATCH 6/9] Add "what's in the PGP" section to doc detail (#1623)

---
 .../templates/corpus/document_detail.html     | 33 ++++++++
 geniza/corpus/tests/test_corpus_templates.py  | 38 +++++++++
 sitemedia/scss/pages/_document.scss           | 77 +++++++++++++++++--
 3 files changed, 141 insertions(+), 7 deletions(-)

diff --git a/geniza/corpus/templates/corpus/document_detail.html b/geniza/corpus/templates/corpus/document_detail.html
index fdc154465..c1a9ea4dc 100644
--- a/geniza/corpus/templates/corpus/document_detail.html
+++ b/geniza/corpus/templates/corpus/document_detail.html
@@ -123,6 +123,39 @@ <h2 class="sr-only">
             </dl>
         </section>
 
+        {% if document.has_image or document.digital_editions.count or document.digital_translations.count %}
+            {% with n_transcriptions=document.digital_editions.count n_translations=document.digital_translations.count %}
+                <section class="content-stats">
+                    {# Translators: label for document content stats (number of translations, transcriptions, images) #}
+                    <h2>{% translate "What's in the PGP" %}</h2>
+                    <ul>
+                        {# translators: indicator that a document has an image #}
+                        {% if document.has_image %}<li class="has-image">{% translate 'Image' %}</li>{% endif %}
+                        {% if n_transcriptions > 0 %}
+                            {# translators: n_transcriptions is the number of a document's digitized transcriptions #}
+                            <li class="transcription-count">
+                                {% blocktranslate count counter=n_transcriptions trimmed %}
+                                    {{ n_transcriptions }} Transcription
+                                {% plural %}
+                                    {{ n_transcriptions }} Transcriptions
+                                {% endblocktranslate %}
+                            </li>
+                        {% endif %}
+                        {% if n_translations > 0 %}
+                            {# translators: n_translations is the number of a document's digitized translations #}
+                            <li class="translation-count">
+                                {% blocktranslate count counter=n_translations trimmed %}
+                                    {{ n_translations }} Translation
+                                {% plural %}
+                                    {{ n_translations }} Translations
+                                {% endblocktranslate %}
+                            </li>
+                        {% endif %}
+                    </ul>
+                </section>
+            {% endwith %}
+        {% endif %}
+
         <section class="description">
             {# Translators: label for document description #}
             <h2>{% translate 'Description' %}</h2>
diff --git a/geniza/corpus/tests/test_corpus_templates.py b/geniza/corpus/tests/test_corpus_templates.py
index 87041a838..aa71d460d 100644
--- a/geniza/corpus/tests/test_corpus_templates.py
+++ b/geniza/corpus/tests/test_corpus_templates.py
@@ -433,6 +433,44 @@ def test_source_location(self, client, document, source):
         )
         assertNotContains(response, "p. 25")  # should not show when removed
 
+    def test_whats_in_pgp(self, client, document, source, unpublished_editions):
+        """Document detail template should show what's in the PGP"""
+        # has no image, transcription or translation
+        empty_doc = Document.objects.create()
+        response = client.get(empty_doc.get_absolute_url())
+        assertNotContains(response, "What's in the PGP")
+
+        # has image but no transcription or translation
+        response = client.get(document.get_absolute_url())
+        assertContains(response, "What's in the PGP")
+        assertContains(response, '<li class="has-image">Image</li>')
+        assertNotContains(response, '<li class="transcription-count">')
+        assertNotContains(response, '<li class="translation-count">')
+
+        # add a footnote with a digital edition
+        Footnote.objects.create(
+            content_object=document,
+            source=unpublished_editions,
+            doc_relation=[Footnote.DIGITAL_EDITION],
+        )
+        response = client.get(document.get_absolute_url())
+        assertContains(response, '<li class="transcription-count">')
+        assertContains(response, "1 Transcription")
+
+        # add two footnotes with digital translation
+        Footnote.objects.create(
+            content_object=document,
+            source=source,
+            doc_relation=[Footnote.DIGITAL_TRANSLATION],
+        )
+        Footnote.objects.create(
+            content_object=document,
+            source=unpublished_editions,
+            doc_relation=[Footnote.DIGITAL_TRANSLATION],
+        )
+        response = client.get(document.get_absolute_url())
+        assertContains(response, "2 Translations")
+
 
 class TestDocumentTabsSnippet:
     def test_detail_link(self, client, document):
diff --git a/sitemedia/scss/pages/_document.scss b/sitemedia/scss/pages/_document.scss
index c08f37ecc..0c83ef428 100644
--- a/sitemedia/scss/pages/_document.scss
+++ b/sitemedia/scss/pages/_document.scss
@@ -21,9 +21,11 @@
 main.document {
     max-width: 100vw;
     @include breakpoints.for-tablet-landscape-up {
-        box-sizing: content-box;
-        * {
-            max-width: 896px;
+        .container,
+        .container *,
+        section,
+        section * {
+            max-width: calc(896px + 2rem);
         }
     }
     // Primary container
@@ -98,14 +100,12 @@ main.document {
                 margin: 2rem 0 0;
                 align-self: flex-start;
                 margin-left: 0;
-                padding: 0 spacing.$spacing-md 2rem;
             }
         }
-        // "Description" header and content
+        // "what's in the PGP" and "description"
+        section.content-stats,
         section.description {
-            padding-bottom: 2rem;
             margin: spacing.$spacing-md 0 0;
-            border-bottom: 1px solid var(--disabled);
             @include breakpoints.for-tablet-landscape-up {
                 margin: 2rem 0 0;
             }
@@ -118,6 +118,68 @@ main.document {
                     @include meta-marker;
                 }
             }
+        }
+        // what's in the pgp
+        section.content-stats ul {
+            display: flex;
+            flex-flow: row wrap;
+            margin-left: 1.25rem;
+            gap: 1rem;
+            @include breakpoints.for-tablet-landscape-up {
+                gap: 1.5rem;
+            }
+            li + li {
+                border-left: 1px solid var(--disabled);
+                padding-left: 1rem;
+                @include breakpoints.for-tablet-landscape-up {
+                    padding-left: 1.5rem;
+                }
+            }
+            li {
+                display: flex;
+                align-items: center;
+                gap: 0.625rem;
+                &::before {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 4px;
+                    background-color: var(--background-light);
+                    width: 1.5rem;
+                    height: 1.5rem;
+                    @include breakpoints.for-tablet-landscape-up {
+                        width: 2rem;
+                        height: 2rem;
+                    }
+                }
+            }
+            li.has-image::before {
+                content: "\f1dd"; // phosphor ph-image icon
+                @include typography.icon-button-sm;
+                @include breakpoints.for-tablet-landscape-up {
+                    @include typography.icon-button-md;
+                }
+            }
+            li.transcription-count::before {
+                content: "a";
+                font-size: typography.$text-size-xl;
+                @include breakpoints.for-tablet-landscape-up {
+                    font-size: typography.$text-size-4xl;
+                }
+            }
+            li.translation-count::before {
+                content: "א";
+                @include typography.transcription;
+                @include breakpoints.for-tablet-landscape-up {
+                    font-size: typography.$text-size-4xl;
+                    padding-bottom: 2px;
+                }
+            }
+        }
+        // Description
+        section.description {
+            padding-bottom: 2rem;
+            border-bottom: 1px solid var(--disabled);
             p {
                 white-space: pre-line;
                 padding-left: 1.25rem;
@@ -142,6 +204,7 @@ main.document {
         @include breakpoints.for-tablet-landscape-up {
             width: 896px;
             margin: 2rem 0;
+            padding: 0;
         }
         @include typography.body;
         color: var(--extra-metadata-text);

From 3875d2e48a6fd6c25b45d82e6e8424298b5fa845 Mon Sep 17 00:00:00 2001
From: Ben Silverman <ben@performantsoftware.com>
Date: Tue, 23 Jul 2024 13:10:41 -0400
Subject: [PATCH 7/9] adjust doc detail layout for permalink

---
 sitemedia/scss/pages/_document.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/sitemedia/scss/pages/_document.scss b/sitemedia/scss/pages/_document.scss
index 0c83ef428..0957ee913 100644
--- a/sitemedia/scss/pages/_document.scss
+++ b/sitemedia/scss/pages/_document.scss
@@ -195,6 +195,10 @@ main.document {
     }
     dl.metadata-list.tertiary {
         padding: 0 1rem;
+        max-width: 896px;
+        @include breakpoints.for-tablet-landscape-up {
+            width: 896px;
+        }
     }
     // Additional metadata section, like input date ("In PGP since") and historical shelfmark
     section.extra-metadata {

From 2331d6e4164f93ef04f9aee4c3e699c3a0fb7cef Mon Sep 17 00:00:00 2001
From: Ben Silverman <ben@performantsoftware.com>
Date: Wed, 24 Jul 2024 13:17:59 -0400
Subject: [PATCH 8/9] Add related entities to document detail page (#1625)

---
 .../templates/corpus/document_detail.html     | 38 +++++++++
 geniza/corpus/tests/test_corpus_views.py      | 77 +++++++++++++++++++
 geniza/corpus/views.py                        |  7 ++
 sitemedia/scss/base/_typography.scss          | 11 +++
 sitemedia/scss/components/_transcription.scss |  1 +
 sitemedia/scss/pages/_document.scss           | 48 +++++++++++-
 6 files changed, 178 insertions(+), 4 deletions(-)

diff --git a/geniza/corpus/templates/corpus/document_detail.html b/geniza/corpus/templates/corpus/document_detail.html
index c1a9ea4dc..243a0d6a6 100644
--- a/geniza/corpus/templates/corpus/document_detail.html
+++ b/geniza/corpus/templates/corpus/document_detail.html
@@ -162,6 +162,44 @@ <h2>{% translate 'Description' %}</h2>
             <p>{{ document.description|pgp_urlize }}</p>
         </section>
 
+        {# related people #}
+        {% if related_people.exists %}
+            <section class="related">
+                {# Translators: heading label for document related people #}
+                <h2>{% translate "Related People" %}</h2>
+                <dl>
+                    {% regroup related_people by type as person_relations %}
+                    {% for relation_type in person_relations %}
+                        <dt>{{ relation_type.grouper }}</dt>
+                        <dd>
+                            {% for relation in relation_type.list %}
+                                {% if relation.person.get_absolute_url %}<a data-turbo="false" href="{{ relation.person.get_absolute_url }}">{{ relation.person }}</a>{% else %}{{ relation.person }}{% endif %}{% if not forloop.last %}, {% endif %}
+                            {% endfor %}
+                        </dd>
+                    {% endfor %}
+                </dl>
+            </section>
+        {% endif %}
+
+        {# related places #}
+        {% if related_places.exists %}
+            <section class="related">
+                {# Translators: heading label for document related places #}
+                <h2>{% translate "Related Places" %}</h2>
+                <dl>
+                    {% regroup related_places.all by type as place_relations %}
+                    {% for relation_type in place_relations %}
+                        <dt>{{ relation_type.grouper }}</dt>
+                        <dd>
+                            {% for relation in relation_type.list %}
+                                <a data-turbo="false" href="{{ relation.place.get_absolute_url }}">{{ relation.place }}</a>{% if not forloop.last %}, {% endif %}
+                            {% endfor %}
+                        </dd>
+                    {% endfor %}
+                </dl>
+            </section>
+        {% endif %}
+
         {% if document.tags.exists %}
             <section>
                 {# Translators: label for tags on a document #}
diff --git a/geniza/corpus/tests/test_corpus_views.py b/geniza/corpus/tests/test_corpus_views.py
index cb26897b2..5c380ced9 100644
--- a/geniza/corpus/tests/test_corpus_views.py
+++ b/geniza/corpus/tests/test_corpus_views.py
@@ -36,6 +36,13 @@
     old_pgp_tabulate_data,
     pgp_metadata_for_old_site,
 )
+from geniza.entities.models import (
+    DocumentPlaceRelation,
+    Person,
+    PersonDocumentRelation,
+    PersonDocumentRelationType,
+    Place,
+)
 from geniza.footnotes.forms import SourceChoiceForm
 from geniza.footnotes.models import Creator, Footnote, Source, SourceType
 
@@ -176,6 +183,76 @@ def test_get_context_data(self, client, document, source):
         assert "transcription" in response.context["default_shown"]
         assert "transcription" not in response.context["disabled"]
 
+        # related people and places should be empty querysets
+        assert response.context["related_people"].count() == 0
+        assert response.context["related_places"].count() == 0
+
+        # add related people
+        abu = Person.objects.create(slug="abu-imran")
+        ezra = Person.objects.create(slug="ezra-b-hillel")
+        nahray = Person.objects.create(slug="nahray")
+        (author, _) = PersonDocumentRelationType.objects.get_or_create(name="Author")
+        (recipient, _) = PersonDocumentRelationType.objects.get_or_create(
+            name="Recipient"
+        )
+        PersonDocumentRelation.objects.create(
+            person=ezra, type=recipient, document=document
+        )
+        PersonDocumentRelation.objects.create(
+            person=abu, type=recipient, document=document
+        )
+        PersonDocumentRelation.objects.create(
+            person=nahray, type=author, document=document
+        )
+        response = client.get(reverse("corpus:document", args=(document.pk,)))
+        assert response.context["related_people"].count() == 3
+        # should sort alphabetically by type, then slug (name)
+        assert response.context["related_people"].first().person.pk == nahray.pk
+        assert response.context["related_people"][1].person.pk == abu.pk
+
+        # add related place
+        fustat = Place.objects.create(slug="fustat")
+        DocumentPlaceRelation.objects.create(place=fustat, document=document)
+        assert response.context["related_places"].count() == 1
+        assert response.context["related_places"].first().place.pk == fustat.pk
+
+    def test_related_entities(
+        self, client, document, person, person_diacritic, person_multiname
+    ):
+        # add related people
+        person.has_page = True
+        person.save()
+        (author, _) = PersonDocumentRelationType.objects.get_or_create(name="Author")
+        (recipient, _) = PersonDocumentRelationType.objects.get_or_create(
+            name="Recipient"
+        )
+        PersonDocumentRelation.objects.create(
+            person=person_multiname, type=recipient, document=document
+        )
+        PersonDocumentRelation.objects.create(
+            person=person_diacritic, type=recipient, document=document
+        )
+        PersonDocumentRelation.objects.create(
+            person=person, type=author, document=document
+        )
+        # add related place
+        fustat = Place.objects.create(slug="fustat")
+        DocumentPlaceRelation.objects.create(place=fustat, document=document)
+
+        # should group "recipient" people together and join their names by comma
+        response = client.get(reverse("corpus:document", args=(document.pk,)))
+        # should be "Halfon, Zed" = recipients
+        print(response.content)
+        assertContains(response, f"{person_diacritic}, {person_multiname}", html=True)
+        # should link to author because has_page=True
+        assertContains(
+            response, f'<a data-turbo="false" href="{person.get_absolute_url()}">'
+        )
+        # should link to place
+        assertContains(
+            response, f'<a data-turbo="false" href="{fustat.get_absolute_url()}">'
+        )
+
 
 @pytest.mark.django_db
 def test_old_pgp_tabulate_data():
diff --git a/geniza/corpus/views.py b/geniza/corpus/views.py
index 55cea70eb..2db628aaa 100644
--- a/geniza/corpus/views.py
+++ b/geniza/corpus/views.py
@@ -384,6 +384,13 @@ def get_context_data(self, **kwargs):
                     for panel in ["images", "translation", "transcription"]
                     if panel not in available_panels
                 ],
+                # related entities: sorted by type for grouping, and slug for alphabetization
+                "related_people": self.object.persondocumentrelation_set.order_by(
+                    "type__name", "person__slug"
+                ),
+                "related_places": self.object.documentplacerelation_set.order_by(
+                    "type__name", "place__slug"
+                ),
             }
         )
         return context_data
diff --git a/sitemedia/scss/base/_typography.scss b/sitemedia/scss/base/_typography.scss
index 6fa57d567..d17135b78 100644
--- a/sitemedia/scss/base/_typography.scss
+++ b/sitemedia/scss/base/_typography.scss
@@ -265,6 +265,17 @@ $text-size-7xl: 2.25rem; //  = 36px
     line-height: 1.5;
 }
 
+// small body text, e.g. for descriptions in search results
+@mixin body-sm {
+    font-family: fonts.$primary;
+    font-size: $text-size-sm;
+    line-height: 17 / 14;
+    @include breakpoints.for-tablet-landscape-up {
+        font-size: $text-size-lg;
+        line-height: 25 / 18;
+    }
+}
+
 // label for unpublished records in scholarship records view
 @mixin unpublished {
     @include caption;
diff --git a/sitemedia/scss/components/_transcription.scss b/sitemedia/scss/components/_transcription.scss
index c6eb2e32c..e2a4c95f9 100644
--- a/sitemedia/scss/components/_transcription.scss
+++ b/sitemedia/scss/components/_transcription.scss
@@ -96,6 +96,7 @@
                 background-color: var(--background-light);
                 cursor: default;
                 &:after,
+                &:before,
                 svg {
                     color: var(--disabled);
                 }
diff --git a/sitemedia/scss/pages/_document.scss b/sitemedia/scss/pages/_document.scss
index 0957ee913..36ae8e3b7 100644
--- a/sitemedia/scss/pages/_document.scss
+++ b/sitemedia/scss/pages/_document.scss
@@ -80,8 +80,8 @@ main.document {
             @include breakpoints.for-tablet-landscape-up {
                 margin-left: 35px;
             }
-            :first-child {
-                margin-top: spacing.$spacing-md;
+            > :first-child {
+                margin-top: spacing.$spacing-sm;
                 @include breakpoints.for-tablet-landscape-up {
                     margin-top: 0px;
                 }
@@ -102,9 +102,10 @@ main.document {
                 margin-left: 0;
             }
         }
-        // "what's in the PGP" and "description"
+        // "what's in the PGP", "description", "related people/places"
         section.content-stats,
-        section.description {
+        section.description,
+        section.related {
             margin: spacing.$spacing-md 0 0;
             @include breakpoints.for-tablet-landscape-up {
                 margin: 2rem 0 0;
@@ -165,6 +166,7 @@ main.document {
                 font-size: typography.$text-size-xl;
                 @include breakpoints.for-tablet-landscape-up {
                     font-size: typography.$text-size-4xl;
+                    padding-bottom: 2px;
                 }
             }
             li.translation-count::before {
@@ -185,6 +187,44 @@ main.document {
                 padding-left: 1.25rem;
             }
         }
+        // related entities
+        section.related {
+            dl {
+                margin: 0 0 0 1.25rem;
+                dt {
+                    padding-top: 0.5rem;
+                    @include typography.body-italic;
+                }
+                dd + dt {
+                    padding-top: 1rem;
+                    margin-top: 1rem;
+                    border-top: 1px solid var(--tabs-bottom);
+                }
+                dd {
+                    @include typography.body-sm;
+                }
+                @include breakpoints.for-tablet-landscape-up {
+                    display: grid;
+                    grid-template-columns: 33% 1fr;
+                    margin: 1.25rem 0 0 1.25rem;
+                    gap: 0.5rem 0;
+                    dt,
+                    dd {
+                        padding-top: 0;
+                        @include typography.body;
+                        font-style: normal;
+                    }
+                    dd + dt,
+                    dd + dt + dd {
+                        margin-top: 0;
+                        padding-top: 0.5rem;
+                        border-top: 1px solid var(--tabs-bottom);
+                    }
+                }
+            }
+            padding-bottom: 2rem;
+            border-bottom: 1px solid var(--disabled);
+        }
         // link to download transcription
         section.transcription-link {
             margin-top: spacing.$spacing-md;

From e4f74fa5289ec0e83cfde5ed605a24d275bf0df0 Mon Sep 17 00:00:00 2001
From: Ben Silverman <ben@performantsoftware.com>
Date: Wed, 24 Jul 2024 18:30:22 -0400
Subject: [PATCH 9/9] Redesign scholarship records page, include ITT panel
 (#1627)

---
 .../corpus/document_scholarship.html          | 36 +++++------
 .../corpus/snippets/document_tabs.html        |  2 +-
 geniza/corpus/templatetags/corpus_extras.py   |  8 ++-
 geniza/corpus/tests/test_corpus_templates.py  | 22 ++++---
 .../corpus/tests/test_corpus_templatetags.py  | 16 ++---
 sitemedia/js/controllers/iiif_controller.js   |  9 ++-
 sitemedia/scss/components/_docheader.scss     |  2 +-
 sitemedia/scss/components/_footnote.scss      | 63 +++++++++++++------
 sitemedia/scss/components/_tabs.scss          |  4 +-
 sitemedia/scss/pages/_document.scss           | 16 +++++
 sitemedia/scss/pages/_person.scss             |  2 +-
 sitemedia/scss/pages/_scholarship.scss        | 21 ++++++-
 12 files changed, 134 insertions(+), 67 deletions(-)

diff --git a/geniza/corpus/templates/corpus/document_scholarship.html b/geniza/corpus/templates/corpus/document_scholarship.html
index 397bf6022..812dd85ac 100644
--- a/geniza/corpus/templates/corpus/document_scholarship.html
+++ b/geniza/corpus/templates/corpus/document_scholarship.html
@@ -23,36 +23,36 @@ <h1 class="sr-only">{{ page_title }}</h1>
                             <dd>
                                 {{ source.grouper.formatted_display|safe }}
                             </dd>
-                            <dt class="relation">
-                                {# Translators: label for included document relations for a single footnote #}
-                                {% translate "includes" as includes_text %}
-                                {% if source.list|has_location_or_url %}
-                                    {# Translators: label for document relations in list of footnotes #}
-                                    {% blocktranslate with relation=source.list|all_doc_relations|lower trimmed %}
-                                        for {{ relation }} see
-                                    {% endblocktranslate%}
-                                {% else %}
-                                    {# Translators: label for document relations for one footnote with no location or URL #}
-                                    {% blocktranslate with relation=source.list|all_doc_relations|lower trimmed %}
-                                        includes {{ relation }}
-                                    {% endblocktranslate%}
-                                {% endif %}
-                            </dt>
                             {% if source.list|has_location_or_url %}
-                                <dd class="relation">
-                                    <ul>
+                                {# Translators: accessibility label for the specific location of a citation in a source record #}
+                                <dt class="sr-only">{% translate "Location in source" %}</dt>
+                                <dd>
+                                    <ul class="locations">
                                         {% for fn in source.list %}
                                             {% ifchanged %}{# omit duplicate footnote locations #}
-                                                <li class="location">{% include "corpus/snippets/footnote_location.html" %}</li>
+                                                <li>{% include "corpus/snippets/footnote_location.html" %}</li>
                                             {% endifchanged %}
                                         {% endfor %}
                                     </ul>
                                 </dd>
                             {% endif %}
+
+                            {# Translators: accessibility label for the relationship(s) of a source to a document #}
+                            <dt class="sr-only">{% translate "Relation to document" %}</dt>
+                            <dd>
+                                <ul class="relations">
+                                    {% for relation in source.list|all_doc_relations %}
+                                        <li>{{ relation }}</li>
+                                    {% endfor %}
+                                </ul>
+                            </dd>
                         </dl>
                     </li>
                 {% endspaceless %}
             {% endfor %}
         </ol>
     </div>
+
+    {# viewer #}
+    {% include "corpus/snippets/document_transcription.html" %}
 {% endblock main %}
diff --git a/geniza/corpus/templates/corpus/snippets/document_tabs.html b/geniza/corpus/templates/corpus/snippets/document_tabs.html
index afe1e69f0..8a52c39a5 100644
--- a/geniza/corpus/templates/corpus/snippets/document_tabs.html
+++ b/geniza/corpus/templates/corpus/snippets/document_tabs.html
@@ -8,7 +8,7 @@
             {% translate "Document Details" as details_text %}
             <li><a href="{{ document_url }}"{% if request.path == document_url %} aria-current="page"{% endif %}>{{ details_text }}</a></li>
             {# Translators: n_records is number of scholarship records #}
-            {% blocktranslate asvar srec_text %}Scholarship Records ({{ n_records }}){% endblocktranslate %}
+            {% blocktranslate asvar srec_text %}Select Bibliography ({{ n_records }}){% endblocktranslate %}
             {% url 'corpus:document-scholarship' pk=document.pk as scholarship_url %}
             <li>{% if n_records > 0 %}<a href="{{ scholarship_url }}"{% if request.path == scholarship_url %} aria-current="page"{% endif %}>{{ srec_text }}</a>{% else %}<span disabled aria-disabled="true">{{ srec_text }}</span>{% endif %}</li>
             {# Translators: n_reldocs is number of related documents #}
diff --git a/geniza/corpus/templatetags/corpus_extras.py b/geniza/corpus/templatetags/corpus_extras.py
index 6527b8cb4..0d84c155d 100644
--- a/geniza/corpus/templatetags/corpus_extras.py
+++ b/geniza/corpus/templatetags/corpus_extras.py
@@ -183,6 +183,8 @@ def has_location_or_url(footnotes):
 
 @register.filter
 def all_doc_relations(footnotes):
-    """For scholarship records list: join doc relations for all footnotes
-    by a comma."""
-    return ", ".join(sorted(set([str(fn.doc_relation) for fn in footnotes])))
+    """For scholarship records list: list doc relations for all footnotes."""
+    relations = set()
+    for fn in footnotes:
+        relations.update(set([n.strip() for n in str(fn.doc_relation).split(",")]))
+    return sorted(relations)
diff --git a/geniza/corpus/tests/test_corpus_templates.py b/geniza/corpus/tests/test_corpus_templates.py
index aa71d460d..698bfffdc 100644
--- a/geniza/corpus/tests/test_corpus_templates.py
+++ b/geniza/corpus/tests/test_corpus_templates.py
@@ -388,9 +388,7 @@ def test_source_relation(self, client, document, source, twoauthor_source):
         response = client.get(
             reverse("corpus:document-scholarship", args=[document.pk])
         )
-        assertContains(
-            response, '<dt class="relation">includes edition</dt>', html=True
-        )
+        assertContains(response, "<li>Edition</li>", html=True)
 
         fn2 = Footnote.objects.create(
             content_object=document,
@@ -401,7 +399,7 @@ def test_source_relation(self, client, document, source, twoauthor_source):
         response = client.get(
             reverse("corpus:document-scholarship", args=[document.pk])
         )
-        assertContains(response, '<dt class="relation">for edition see</dt>', html=True)
+        assertContains(response, "<li>Edition</li>", html=True)
 
         fn2.doc_relation = [Footnote.EDITION, Footnote.TRANSLATION]
         fn2.save()
@@ -410,7 +408,13 @@ def test_source_relation(self, client, document, source, twoauthor_source):
         )
         assertContains(
             response,
-            '<dt class="relation">for edition, translation see</dt>',
+            "<li>Edition</li>",
+            html=True,
+        )
+        print(response.content)
+        assertContains(
+            response,
+            "<li>Translation</li>",
             html=True,
         )
 
@@ -425,7 +429,7 @@ def test_source_location(self, client, document, source):
         response = client.get(
             reverse("corpus:document-scholarship", args=[document.pk])
         )
-        assertContains(response, "p. 25")
+        assertContains(response, "<li>p. 25</li>", html=True)
         fn.location = ""
         fn.save()
         response = client.get(
@@ -484,7 +488,7 @@ def test_no_footnotes(self, client, document):
         # uses span, not link
         assertContains(
             response,
-            "<span disabled aria-disabled='true'>Scholarship Records (0)</span>",
+            "<span disabled aria-disabled='true'>Select Bibliography (0)</span>",
             html=True,
         )
 
@@ -498,13 +502,13 @@ def test_with_footnotes(self, client, document, source, twoauthor_source):
             response, reverse("corpus:document-scholarship", args=[document.pk])
         )
         # count should be 1
-        assertContains(response, "Scholarship Records (1)")
+        assertContains(response, "Select Bibliography (1)")
 
         Footnote.objects.create(content_object=document, source=twoauthor_source)
         response = client.get(document.get_absolute_url())
 
         # count should be 2
-        assertContains(response, "Scholarship Records (2)")
+        assertContains(response, "Select Bibliography (2)")
 
     def test_no_related_docs(self, client, document, empty_solr):
         """document nav should render disabled related documents tab if no related documents"""
diff --git a/geniza/corpus/tests/test_corpus_templatetags.py b/geniza/corpus/tests/test_corpus_templatetags.py
index 47bf52aae..167e25e0e 100644
--- a/geniza/corpus/tests/test_corpus_templatetags.py
+++ b/geniza/corpus/tests/test_corpus_templatetags.py
@@ -59,10 +59,10 @@ def test_all_doc_relations(self, document, footnote):
             source=footnote.source,
             doc_relation=Footnote.DIGITAL_EDITION,
         )
-        assert (
-            corpus_extras.all_doc_relations(list(document.footnotes.all()))
-            == "Digital Edition, Edition"
-        )
+        assert corpus_extras.all_doc_relations(list(document.footnotes.all())) == [
+            "Digital Edition",
+            "Edition",
+        ]
         # should not repeat doc relations even if multiple of the same type appear
         Footnote.objects.create(
             object_id=document.pk,
@@ -71,10 +71,10 @@ def test_all_doc_relations(self, document, footnote):
             doc_relation=Footnote.EDITION,
             location="other place",
         )
-        assert (
-            corpus_extras.all_doc_relations(list(document.footnotes.all()))
-            == "Digital Edition, Edition"
-        )
+        assert corpus_extras.all_doc_relations(list(document.footnotes.all())) == [
+            "Digital Edition",
+            "Edition",
+        ]
 
 
 def test_dict_item():
diff --git a/sitemedia/js/controllers/iiif_controller.js b/sitemedia/js/controllers/iiif_controller.js
index 021c83ea6..f6ed62d6a 100644
--- a/sitemedia/js/controllers/iiif_controller.js
+++ b/sitemedia/js/controllers/iiif_controller.js
@@ -101,9 +101,12 @@ export default class extends Controller {
             );
         }
         const OSD = this.osdTarget.querySelector(".openseadragon-container");
-        OSD.style.transition = "opacity 300ms ease, visibility 0s ease 300ms";
-        OSD.style.visibility = "hidden";
-        OSD.style.opacity = "0";
+        if (OSD) {
+            OSD.style.transition =
+                "opacity 300ms ease, visibility 0s ease 300ms";
+            OSD.style.visibility = "hidden";
+            OSD.style.opacity = "0";
+        }
     }
 
     addOpenSeaDragon(settings) {
diff --git a/sitemedia/scss/components/_docheader.scss b/sitemedia/scss/components/_docheader.scss
index 61d4bc395..70af0de0b 100644
--- a/sitemedia/scss/components/_docheader.scss
+++ b/sitemedia/scss/components/_docheader.scss
@@ -37,7 +37,7 @@ html[lang="ar"] span#formatted-title {
 
 // Edit link for admins
 .edit-link-container {
-    @include container.measure;
+    max-width: calc(896px + 2rem);
     top: spacing.$spacing-4xl;
     position: absolute;
     width: 100%;
diff --git a/sitemedia/scss/components/_footnote.scss b/sitemedia/scss/components/_footnote.scss
index 2b396da65..0aaf34cc2 100644
--- a/sitemedia/scss/components/_footnote.scss
+++ b/sitemedia/scss/components/_footnote.scss
@@ -9,11 +9,10 @@
 
 .citation {
     counter-increment: search-counter;
-    padding-bottom: spacing.$spacing-md;
     padding: 0 0 spacing.$spacing-md spacing.$spacing-xl;
     margin-left: -#{spacing.$spacing-lg};
     @include breakpoints.for-tablet-landscape-up {
-        padding-left: spacing.$spacing-xl;
+        padding-left: 1.625rem;
         margin-left: 0;
     }
     @include typography.body;
@@ -26,28 +25,32 @@
     }
     &::before {
         content: counter(search-counter);
-        margin-left: -#{spacing.$spacing-xl};
+        margin-left: -1.625rem;
         text-align: left;
         float: left;
         @include typography.body-bold;
     }
-    .relation {
-        max-width: none; // required to span the whole width
-        background-color: var(--background-light);
-        margin-left: -#{spacing.$spacing-xl};
-        padding: spacing.$spacing-4xs 0 spacing.$spacing-4xs spacing.$spacing-xl;
-        &:is(dt) {
-            margin-top: spacing.$spacing-md;
-            @include typography.caption;
-        }
-        &:is(dd) {
-            margin-bottom: spacing.$spacing-2xs;
-            @include typography.meta;
-        }
-        li.location {
+    ul.locations {
+        margin-top: 0.5rem;
+        li {
+            @include typography.body-bold;
             word-break: break-all;
         }
     }
+    ul.relations {
+        display: flex;
+        flex-flow: row wrap;
+        gap: 1rem;
+        margin-top: 1rem;
+        li {
+            display: flex;
+            align-items: center;
+            height: 2rem;
+            padding: 0 spacing.$spacing-md;
+            border-radius: 5px;
+            background-color: var(--background-gray);
+        }
+    }
     div.unpublished {
         margin-top: spacing.$spacing-3xs;
         @include typography.unpublished;
@@ -55,13 +58,35 @@
     }
 }
 
+// RTL overrides
+html[dir="rtl"] .citation {
+    padding: 0 spacing.$spacing-xl spacing.$spacing-md 0;
+    margin-right: -#{spacing.$spacing-lg};
+    margin-left: 0;
+    @include breakpoints.for-tablet-landscape-up {
+        padding-right: 1.625rem;
+        padding-left: 0;
+        margin-right: 0;
+        margin-left: 0;
+    }
+    &::before {
+        margin-left: 0;
+        margin-right: -1.625rem;
+        text-align: right;
+        float: right;
+    }
+    & + .citation {
+        padding-top: spacing.$spacing-md;
+    }
+}
+
 // Hebrew variant
 html[lang="he"] .citation {
     @include typography.body-he;
     *[lang="en"] {
         @include typography.body;
     }
-    dd.relation:not([lang="en"]) {
+    ul.relations li:not([lang="en"]) {
         @include typography.meta-he;
     }
 }
@@ -72,7 +97,7 @@ html[lang="ar"] .citation {
     *[lang="en"] {
         @include typography.body;
     }
-    dd.relation:not([lang="en"]) {
+    ul.relations li:not([lang="en"]) {
         @include typography.meta-ar;
     }
 }
diff --git a/sitemedia/scss/components/_tabs.scss b/sitemedia/scss/components/_tabs.scss
index c18de9a1b..41f81bd14 100644
--- a/sitemedia/scss/components/_tabs.scss
+++ b/sitemedia/scss/components/_tabs.scss
@@ -63,8 +63,8 @@ nav#tabs {
         padding-bottom: spacing.$spacing-xs;
         border-bottom: 4px solid var(--tabs-bottom);
         @include breakpoints.for-tablet-landscape-up {
-            padding-left: 6rem;
-            padding-right: 6rem;
+            padding-left: 5.5rem;
+            padding-right: 5.5rem;
         }
     }
     // Link-specific tabs styling
diff --git a/sitemedia/scss/pages/_document.scss b/sitemedia/scss/pages/_document.scss
index 36ae8e3b7..59893be12 100644
--- a/sitemedia/scss/pages/_document.scss
+++ b/sitemedia/scss/pages/_document.scss
@@ -273,6 +273,22 @@ main.document {
     }
 }
 
+// RTL tweaks
+html[dir="rtl"] main.document section.content-stats ul {
+    margin-right: 1.25rem;
+    margin-left: 0;
+    li + li {
+        border-left: none;
+        border-right: 1px solid var(--disabled);
+        padding-left: 0;
+        padding-right: 1rem;
+        @include breakpoints.for-tablet-landscape-up {
+            padding-left: 0;
+            padding-right: 1.5rem;
+        }
+    }
+}
+
 // Hebrew variant
 html[lang="he"] main.document {
     .container section.description h3 {
diff --git a/sitemedia/scss/pages/_person.scss b/sitemedia/scss/pages/_person.scss
index eb652b676..53096a7d8 100644
--- a/sitemedia/scss/pages/_person.scss
+++ b/sitemedia/scss/pages/_person.scss
@@ -292,7 +292,7 @@ html[dir="rtl"] main.person,
 html[dir="rtl"] main.place,
 html[dir="rtl"] main.document {
     .container dl.metadata-list dt::before,
-    .container .description h2::before {
+    .container section > h2::before {
         margin-right: 0;
         margin-left: 12px;
     }
diff --git a/sitemedia/scss/pages/_scholarship.scss b/sitemedia/scss/pages/_scholarship.scss
index fa879f6b9..8f025ce8b 100644
--- a/sitemedia/scss/pages/_scholarship.scss
+++ b/sitemedia/scss/pages/_scholarship.scss
@@ -6,6 +6,13 @@
 @use "../base/spacing";
 
 main.scholarship {
+    max-width: 100vw;
+    @include breakpoints.for-tablet-landscape-up {
+        .container,
+        .container * {
+            max-width: calc(896px + 2rem);
+        }
+    }
     // Primary container
     div.container {
         display: flex;
@@ -17,9 +24,19 @@ main.scholarship {
     }
     ol {
         counter-reset: search-counter;
-        margin: spacing.$spacing-2xl 0 spacing.$spacing-xl spacing.$spacing-lg;
+        margin: 3rem 0 spacing.$spacing-xl spacing.$spacing-lg;
+        @include breakpoints.for-tablet-landscape-up {
+            margin: calc(2rem + 10px) 0 0;
+        }
+    }
+}
+
+// RTL overrides
+html[dir="rtl"] main.scholarship {
+    ol {
+        margin: 3rem spacing.$spacing-lg spacing.$spacing-xl 0;
         @include breakpoints.for-tablet-landscape-up {
-            margin: spacing.$spacing-3xl 0 0;
+            margin: calc(2rem + 10px) 0 0;
         }
     }
 }