improve for narrow screens, primary the search

also make tajweedlegend scale with the screen width when it's too narrow.

.minify.pl

@@ -14,7 +14,7 @@
     ## collapse spaces
     $t =~ s|\s+| |g;
     ## remove horizontal spaces around punctuation
-    $t =~ s|> <|><|g;   # note: this changes the behavior of the html; I'm relying on that
+    $t =~ s| <|<|g;   # note: this changes the behavior of the html; I'm relying on that
     $t =~ s/(<(?:script|style)>) /$1/g;
     $t =~ s/ (<\/(?:script|style)>)/$1/g;
     ## old:

search.js

@@ -43,7 +43,7 @@ function arabic_fold (txt) {  // takes string, return a regex
     .replace(/x/g, '['+hmz)
 }
 
-const sx_init_msg = '<center>أدخل جزءًا من آية للبحث عنها</center>'
+const sx_init_msg = '<center>أدخل جزءًا من&nbsp;آية للبحث&nbsp;عنها</center>'
 
 function show_search (el_sura, el_aaya) {
 
@@ -76,13 +76,13 @@ function show_search (el_sura, el_aaya) {
       .map((a, i) => st <= i && i < en && a.match(q) ? i : -1)
       .filter(i => i !== -1)
     if (r.length > 50) {
-      el_sxr.innerHTML = '<center>يطابق بحثك '+toarab(r.length)+' من الآيات، وهو أكثر من ٥٠؛ حاول التحديد أكثر</center>'
+      el_sxr.innerHTML = '<center>يطابق بحثك '+toarab(r.length)+' من&nbsp;الآيات، وهو أكثر من&nbsp;٥٠؛ حاول التحديد أكثر</center>'
     }
     else if (r.length === 0) {
       el_sxr.innerHTML = '<center>تعذر إيجاد العبارة التي أدخلتها</center>'
     }
     else {
-      el_sxr.innerHTML = `<center>يوجد ${toarab(r.length)} من الآيات</center>` 
+      el_sxr.innerHTML = `<center>يوجد ${toarab(r.length)} من&nbsp;الآيات</center>` 
       const aa = range(r.length).map(a => make_elem('div', { className: 'ac' }))
       aa.forEach((a,j) => {
         const i = r[j]  // 0-based
@@ -96,7 +96,7 @@ function show_search (el_sura, el_aaya) {
           close_search()
         }
         a.append(
-          make_elem('span', { className: 's_a', innerHTML: `سورة ${name} آية ${anum}:` }),
+          make_elem('span', { className: 's_a', innerHTML: `سورة ${name} آية&nbsp;${anum}:` }),
           make_elem('span', { className: 'aya', innerHTML: '<span>يحمّل</span>' }),
         )
       })

style.css

@@ -248,7 +248,7 @@ label, label *, select, input, button {
   #selectors > div label:first-child { width: 1.6em }  /* من سورة and إلى سورة */
 }
 
-@media (max-width: 225px) {
+@media (max-width: 279px) {
   .aaya { display: none }
 }
 
@@ -435,6 +435,10 @@ text {
   z-index: 1;
 }
 
+@media (max-width: 300px) {
+  #tl { height: calc(100vw * 2/5) }  /* make it the same width as the screen */
+}
+
 #tl rect {
   fill: var(--tl-closed);
 }
@@ -796,7 +800,6 @@ details[open] > .details-content {
 
 .pc {  /* popup content */
   padding: 1em;
-  padding-right: 2em;
   width: var(--all-width);
   margin: 0 auto;
 }
@@ -874,20 +877,23 @@ details[open] > .details-content {
 #sx * { font-family: KacstOne }
 /* except #sxr .aya */
 
-#sxi {
-  width: var(--all-width);
-  display: flex;
-  flex: row;
-}
+#sxi { width: var(--all-width) }
+#sx input { min-width: 8em }
 
 #sura_sx {
   font-family: Cortoba;  /* like #sura_{bgn,end}; b/c overriden by ".pc > * *" */
-  width: 6em;
   margin-left: 0.5em;
+  width: 6em;
 }
 
-#sx input {
-  flex-grow: 100; /* all the space it can have */
+#sxi { display: flex; flex: row }
+#sx input { flex-grow: 100 /* all the space it can have */ }
+
+@media (max-width: 428px) { #sura_sx { font-size: 90% } }
+@media (max-width: 409px) { /* make it two lines */
+  #sxi { display: block }
+  #sura_sx { margin-bottom: 0.5em }
+  #sx input { width: 97% /* full row;  100% is too wide */ }
 }
 
 #sx center { margin: 2em  0 }  /* messages, not search results */
@@ -918,13 +924,21 @@ details[open] > .details-content {
   filter: var(--sxrh);
 }
 
-#sxr .s_a {
+.s_a {  /* sura-aaya title in #sxr */
   background: var(--sxsa);
   border-radius: 0 1rem 0 1rem;
   padding: 3rem 1rem 0.5rem 0.75rem;
   margin: 0 -1rem 0 1rem;
 }
 
+@media (max-width: 359px) {
+  .s_a {  /* make it full line */
+    display: block;
+    padding: 1rem;
+    margin: -1rem -1rem 0 -1rem;
+  }
+}
+
 #sxr .aya {
   line-height: 2.75;
 }