Fix some graphical glitches in fish_config

fish_config has some shadows and other elements which don't align
propertly. Fix these, and apply some other miscellaneous polish.

Fixes #7811

CHANGELOG.rst

@@ -45,6 +45,7 @@ This release of fish fixes a few issues discovered in fish 3.2.0:
 -  ``set_color --print-colors`` no longer prints all colors in bold (:issue:`7805`)
 -  Completing commands starting with a ``-`` no longer prints an error (:issue:`7809`).
 
+
 As well as a few small enhancements:
 
 -  ``help`` and ``fish_config`` no longer open to a "Your file couldn't be accessed" page when fish is running in a Chrome OS Crostini Linux VM and URLs are opened in Chrome running outside the VM (:issue:`7789`).
@@ -54,6 +55,7 @@ As well as a few small enhancements:
 -  ``fish_command_not_found`` is now always defined, even if there is no os-specific handler, instead of relying on fish's hardcoded fallback (:issue:`7777`).
 -  fish no longer prints an annoying error if ``access(3)`` fails in standard-nonconforming ways (:issue:`7785`).
 -  Some completion descriptions were reworded and shortened (:issue:`7788`).
+-  Some graphics glitches in ``fish_config`` have been resolved  (:issue:`7811`).
 
 
 If you are upgrading from version 3.1.2 or before, please also review

share/tools/web_config/fishconfig.css

@@ -2,13 +2,16 @@ body {
     background: linear-gradient(to bottom, #a7cfdf 0%, #23538a 100%);
     font-family: monospace, fixed;
     color: #222;
-    min-height: 100vh; /* at least 1 screen high - to prevent the gradient from running out on a short tab */
+}
+
+#ancestor {
     width: 90%;
     margin-left: auto;
     margin-right: auto;
     -moz-box-shadow: 0 0 1px 1px #333;
     -webkit-box-shadow: 0 0 1px 1px #333;
     box-shadow: 0 0 5px 1px #333;
+    border-radius: 8px;
 }
 
 code {
@@ -33,6 +36,7 @@ code {
     display: table-cell;
     border: 1px solid #ccc;
     border-right: none;
+    border-top: none;
     padding-bottom: 15px;
     padding-top: 15px;
     padding-left: 3px;
@@ -45,22 +49,13 @@ code {
 
 #tab_parent :first-child {
     border-top-left-radius: 8px;
+    border-left: none;
 }
 
 #tab_parent :last-child {
     border-top-right-radius: 8px;
 }
 
-.tab_first {
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-}
-
-.tab_last {
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
-}
-
 .selected_tab {
     background-color: #eeeefa;
     border-bottom: none;
@@ -70,11 +65,24 @@ code {
     padding-top: 20px;
     padding-bottom: 20px;
     width: 100%;
-    min-height: 80vh;
+    min-height: 90vh;
     background-color: #eeeefa;
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
     margin-bottom: 20px;
+    position: relative;
+    box-sizing: border-box;
+}
+
+/* This may be placed directly inside a tab, to prevent its contents from growing vertically. */
+.height_limiter {
+    display: flex;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    flex-direction: column;
 }
 
 .footer {
@@ -429,7 +437,10 @@ code {
 .prompt_choices_scrollview {
     padding-top: 5px;
     overflow-y: scroll;
-    max-height: 70vh; /* fill out roughly the rest of the screen once scrolled to the preview */
+}
+
+.prompt_choices_scrollview {
+    position: relative;
 }
 
 .color_scheme_choices_list,

share/tools/web_config/partials/colors.html

@@ -1,6 +1,6 @@
 <div title="Background color for illustration only.
 
-fish cannot change the background color of your terminal and it will not be saved. Refer to your terminal documentation to set its background color.">
+fish cannot change the background color of your terminal. Refer to your terminal documentation to set its background color.">
     <!-- ko with: color_picker -->
     <div class="colorpicker_text_sample" ng-style="{'background-color': terminalBackgroundColor}">
         <span style="position: absolute; left: 10px; top: 3px;" data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'black')}">{{ selectedColorScheme.name }}</span><br>

share/tools/web_config/partials/prompt.html

@@ -1,20 +1,22 @@
+<div class="height_limiter">
 <!-- The first 'sample' prompt is the current one; the remainders are samples. This ought to be cleaned up. -->
 <div class="current_prompt" style="min-height: 7.5em;" ng-style="{'background-color': terminalBackgroundColor}">
-    <div class="prompt_demo_choice_label" style="color: #FFF;">{{ selectedPrompt.name }}</div>
+	<div class="prompt_demo_choice_label" style="color: #FFF;">{{ selectedPrompt.name }}</div>
 	<div ng-bind-html='selectedPrompt.demo | to_trusted' class="prompt_demo unbordered"></div>
 	<div style="position: absolute; right: 5px; bottom: 5px; color:">
 		<span class="save_button"
-			  ng-show="showSaveButton"
+			ng-show="showSaveButton"
-			  style="color: #777"
+			style="color: #CCC"
-			  ng-click="setPrompt()">{{ savePromptButtonTitle }}</span>
+			ng-click="setPrompt()">{{ savePromptButtonTitle }}</span>
 	</div>
 </div>
-<div style="margin: 10px 0 7px 35px;">Preview a prompt below:</div>
+<div style="margin: 10px 15px 7px 15px; padding-bottom: 10px; border-bottom: solid 1px #999">Preview a prompt below:</div>
 <div class="prompt_choices_scrollview">
 <div class="prompt_choices_list">
-    <div ng-repeat="prompt in samplePrompts">
+	<div ng-repeat="prompt in samplePrompts">
-        <div class="prompt_demo_choice_label">{{ prompt.name }}</div>
+		<div class="prompt_demo_choice_label">{{ prompt.name }}</div>
-        <div ng-bind-html='prompt.demo | to_trusted' class="prompt_demo" ng-click="selectPrompt(prompt)"></div>
+		<div ng-bind-html='prompt.demo | to_trusted' class="prompt_demo" ng-click="selectPrompt(prompt)"></div>
-    </div>
+	</div>
+</div>
 </div>
 </div>