From b78a9f2dcfce3f8e5f3a2bb04cfd55349d833805 Mon Sep 17 00:00:00 2001
From: Tyler K <tyly04@gmail.com>
Date: Sat, 19 Oct 2024 08:46:44 -0700
Subject: [PATCH] CSS Improvements for Demo_Gen  (#5715)

Adjusts bootstrap and JS to allow for better scaling based on device
width, as well as allowing for text wrapping.
---
 tutorials/web-demo/public/index.html    | 1 +
 tutorials/web-demo/public/template.html | 3 ++-
 tutorials/web-demo/src/js/index.mjs     | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/tutorials/web-demo/public/index.html b/tutorials/web-demo/public/index.html
index 6c53fde7c4a..4d4c36ed1c4 100644
--- a/tutorials/web-demo/public/index.html
+++ b/tutorials/web-demo/public/index.html
@@ -5,6 +5,7 @@
 		<title>Diplomat Demo Generation Example</title>
 		<script src="dist/index.bundle.js"></script>
 		<link rel="stylesheet" href="dist/index.css"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
 	</head>
 	<body>
 		<div class="container">
diff --git a/tutorials/web-demo/public/template.html b/tutorials/web-demo/public/template.html
index cf0a612ebbb..c8cb7bfad6f 100644
--- a/tutorials/web-demo/public/template.html
+++ b/tutorials/web-demo/public/template.html
@@ -5,6 +5,7 @@
         <script src="dist/rendering.bundle.js" defer></script>
         <title>Rendering Function</title>
         <link rel="stylesheet" href="dist/index.css"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
     </head>
     <body>
         <div id="main" class="container">
@@ -14,7 +15,7 @@
         <template id="terminus">
             <link rel="stylesheet" href="dist/index.css"/>
             <div class="vstack gap-2">
-                <h1><slot name="func-name"></slot></h1>
+                <h1 class="text-break"><slot name="func-name"></slot></h1>
                 <slot name="parameters"></slot>
                 <button type="submit" class="btn btn-primary" data-submit>Submit</button>
                 <div class="card">
diff --git a/tutorials/web-demo/src/js/index.mjs b/tutorials/web-demo/src/js/index.mjs
index c8d7f913e58..c7528a297d0 100644
--- a/tutorials/web-demo/src/js/index.mjs
+++ b/tutorials/web-demo/src/js/index.mjs
@@ -3,6 +3,6 @@ import { RenderInfo } from "icu4x/demo";
 Object.values(RenderInfo.termini).forEach((t) => {
 	let a = document.createElement("a");
 	a.classList.add("list-group-item", "list-group-item-action");
-	a.innerHTML = `<a href="template.html?func=${t.funcName}">${t.funcName}</a>`;
+	a.innerHTML = `<a href="template.html?func=${t.funcName}" class="text-break">${t.funcName}</a>`;
 	document.getElementById("links").appendChild(a);
 });
\ No newline at end of file
