Index: src/chat.js
==================================================================
--- src/chat.js
+++ src/chat.js
@@ -16,10 +16,34 @@
         rect.left >= 0 &&
         rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
         rect.right <= (window.innerWidth || document.documentElement.clientWidth)
     );
   };
+
+  const ForceResizeKludge = (function(){
+    /* Workaround for Safari mayhem regarding use of vh CSS units....
+       We tried to use vh units to set the content area size for the
+       chat layout, but Safari chokes on that, so we calculate that
+       height here: 85% when in "normal" mode and 95% in chat-only
+       mode. Larger than ~95% is too big for Firefox on Android,
+       causing the input area to move off-screen. */
+    const contentArea = E1('div.content');
+    const resized = function(){
+      const wh = window.innerHeight,
+            mult = document.body.classList.contains('chat-only-mode') ? 0.95 : 0.85;
+      contentArea.style.maxHeight = (wh * mult)+"px";
+      //console.debug("resized.",wh, window.getComputedStyle(contentArea).maxHeight);
+    };
+    var doit;
+    window.addEventListener('resize',function(ev){
+      clearTimeout(doit);
+      doit = setTimeout(resized, 100);
+    }, false);
+    resized();
+    return resized;
+  })();
+
   //document.body.classList.add('chat-only-mode');
   const Chat = (function(){
     const cs = {
       e:{/*map of certain DOM elements.*/
         messageInjectPoint: E1('#message-inject-point'),
@@ -170,10 +194,11 @@
           D.removeClass(f.elemsToToggle, 'hidden');
           D.removeClass(document.body, 'chat-only-mode');
         }
         const msg = document.querySelector('.message-widget');
         if(msg) setTimeout(()=>msg.scrollIntoView(),0);
+        ForceResizeKludge();
         return this;
       },
       toggleChatOnlyMode: function(){
         return this.chatOnlyMode(!this.isChatOnlyMode());
       },
@@ -656,20 +681,21 @@
       label: "Left-align my posts",
       boolValue: ()=>!document.body.classList.contains('my-messages-right'),
       callback: function f(){
         document.body.classList.toggle('my-messages-right');
       }
-    }/**,{
+    },{
       label: "Bottom-up chat",
+      disable: true,
       boolValue: ()=>document.body.classList.contains('chat-bottom-up'),
       callback: function(){
         document.body.classList.toggle('chat-bottom-up');
         Chat.settings.set('bottom-up',
                           document.body.classList.contains('chat-bottom-up'));
         setTimeout(()=>Chat.e.inputWrapper.scrollIntoView(), 0);
       }
-    }*/,{
+    },{
       label: "Images inline",
       boolValue: ()=>Chat.settings.getBool('images-inline'),
       callback: function(){
         const v = Chat.settings.getBool('images-inline',true);
         Chat.settings.set('images-inline', !v);
@@ -682,10 +708,11 @@
        show their current values.
     */
     settingsPopup.options.refresh = function(){
       D.clearElement(this.e);
       settingsOps.forEach(function(op){
+        if(op.disable) return;
         const line = D.addClass(D.span(), 'menu-entry');
         const btn = D.append(D.addClass(D.span(), 'button'), op.label);
         D.attr(btn, 'role', 'button');
         const callback = function(ev){
           settingsPopup.hide();

Index: src/default.css
==================================================================
--- src/default.css
+++ src/default.css
@@ -1497,20 +1497,21 @@
   padding: 0.25em 0.5em;
   margin-top: 0;
   min-width: 9em /*avoid unsightly "underlap" with the neighboring
                    .message-widget-tab element*/;
   white-space: pre-wrap/*needed for multi-line edits*/;
+  flex: 1 1 auto;
 }
 body.chat.monospace-messages .message-widget-content,
 body.chat.monospace-messages textarea,
 body.chat.monospace-messages input[type=text]{
   font-family: monospace;  
 }
 /* User name and timestamp (a LEGEND-like element) */
 body.chat .message-widget .message-widget-tab {
   border-radius: 0.25em 0.25em 0 0;
-  margin: 0 0.25em 0em 0.15em;
+  margin: 0.25em 0.25em 0em 0.15em;
   padding: 0 0.5em 0.15em 0.5em;
   cursor: pointer;
   white-space: nowrap;
 }
 body.chat .fossil-tooltip.help-buttonlet-content {
@@ -1641,10 +1642,11 @@
   display: flex;
   flex-direction: column;
   overflow: auto;
   width: 100%;
   flex: 1 1 auto;
+  justify-content: flex-start;
 }
 body.chat.chat-bottom-up #chat-messages-wrapper {
   flex-direction: column-reverse;
   z-index: 99 /* so that it scrolls under input area. If it's
                  lower than div.content then mouse events to it
@@ -1653,21 +1655,22 @@
 body.chat.chat-only-mode #chat-message-wrapper {
 }
 
 body.chat div.content {
   padding: 0;
-  position: relative;
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  max-height: 85vh /* rough approximate */;
+  /*max-height: 85vh*/ /* rough approximate */
+  /* ^^^^ This breaks Safari badly - we'll have to calc this from JS */;
 }
 body.chat.chat-bottom-up div.content {
   flex-direction: column-reverse;
 }
 body.chat.chat-only-mode div.content {
-  max-height: 95vh/*larger than approx. this is too big for Firefox on Android*/;
+  /*max-height: 95vh*//*larger than approx. this is too big for Firefox on Android*/;
+  /* ^^^^ Safari hates this: we re-calc it in JS */
   /* Some skins set margins and a max-width on div.content, but we
      needn't(?) honor those in chat-only mode. */
   margin: 0;
   width: 100%;
   max-width: 100%;
@@ -1680,11 +1683,11 @@
   padding: 0.5em 1em 0 0.5em;
   margin-bottom: 0.5em;
   z-index: 100
     /* see notes in #chat-messages-wrapper. The various popups require a
        z-index higher than this one. */;
-  flex: 0 0 auto;
+  flex: 1 1 auto;
 }
 body.chat.chat-bottom-up #chat-input-area {
   border-bottom: none;
   border-top: 1px solid black;
   margin-bottom: 0;
@@ -1741,6 +1744,12 @@
   flex: 0 1 auto;
   padding: 0.5em 1em;
   margin-left: 0.5em;
   white-space: pre;
   font-family: monospace;
+}
+body.chat #chat-drop-details img {
+  /* If we don't artificially limit the img preview size, they can be
+     so big that the user cannot navigate to the buttons. */
+  max-height: 40vh;
+  max-width: 40vw;
 }