From e5272f420b62e9deb59eda4523efd2f667256c0f Mon Sep 17 00:00:00 2001
From: Sam Gammon <sam@elide.ventures>
Date: Mon, 11 Sep 2023 13:40:49 -0700
Subject: [PATCH] fix: easier copy/paste of package name and version

- fix: add non-breaking space between package name and version to
  allow for copying/pasting each one easily

- fix: add css declaration to make copy/paste easier for package
  name and version

Signed-off-by: Sam Gammon <sam@elide.ventures>
---
 pages/modules/[module].tsx |  9 +++++----
 styles/globals.css         |  2 ++
 styles/page-module.css     | 10 ++++++++++
 3 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 styles/page-module.css

diff --git a/pages/modules/[module].tsx b/pages/modules/[module].tsx
index d1aa6c242048..09ad0f73dc6b 100644
--- a/pages/modules/[module].tsx
+++ b/pages/modules/[module].tsx
@@ -88,14 +88,15 @@ const ModulePage: NextPage<ModulePageProps> = ({
         <div className="max-w-4xl w-4xl mx-auto mt-8">
           <div className="border rounded p-4 divide-y">
             <div>
-              <span className="text-3xl">{module}</span>
-              <span className="text-lg ml-2">{selectedVersion}</span>
+              <span className="selectable text-3xl">{module}</span>
+              <span>&nbsp;</span>{/* helps with dbl-click selection */}
+              <span className="selectable text-lg ml-2">{selectedVersion}</span>
             </div>
             <div className="mt-4 flex flex-wrap sm:divide-x gap-2">
               <div className="basis-0 grow-[999]">
                 <h2 className="text-2xl font-bold mt-4">Install</h2>
                 <div className="mt-2">
-                  <p>
+                  <p className="decorative">
                     To start using this module, make sure you have set up Bzlmod
                     according to the <a href={USER_GUIDE_LINK}>user guide</a>,
                     and add the following to your <code>MODULE.bazel</code>{' '}
@@ -116,7 +117,7 @@ const ModulePage: NextPage<ModulePageProps> = ({
                     </p>
                   )}
                 </div>
-                <h2 className="text-2xl font-bold mt-4">Version history</h2>
+                <h2 className="text-2xl font-bold mt-6 decorative">Version history</h2>
                 <div>
                   <ul className="mt-4">
                     {shownVersions.map((version) => (
diff --git a/styles/globals.css b/styles/globals.css
index 6138cf9c3155..dfdf5270ba0f 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -18,3 +18,5 @@ a {
 * {
   box-sizing: border-box;
 }
+
+@import "./page-module.css";
diff --git a/styles/page-module.css b/styles/page-module.css
new file mode 100644
index 000000000000..9ca81b59ba66
--- /dev/null
+++ b/styles/page-module.css
@@ -0,0 +1,10 @@
+
+/** Page: modules/[module].tsx */
+
+.selectable {
+    user-select: all;
+}
+
+.decorative {
+    user-select: none;
+}