diff --git a/web/chat/chat-thread-list-item.react.js b/web/chat/chat-thread-list-item.react.js
index 902b16193..ddb801887 100644
--- a/web/chat/chat-thread-list-item.react.js
+++ b/web/chat/chat-thread-list-item.react.js
@@ -1,114 +1,115 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
 import type { ChatThreadItem } from 'lib/selectors/chat-selectors';
 import { shortAbsoluteDate } from 'lib/utils/date-utils';
 
 import { useSelector } from '../redux/redux-utils';
 import {
   useOnClickThread,
   useThreadIsActive,
 } from '../selectors/nav-selectors';
 import ChatThreadListItemMenu from './chat-thread-list-item-menu.react';
 import ChatThreadListSeeMoreSidebars from './chat-thread-list-see-more-sidebars.react';
 import ChatThreadListSidebar from './chat-thread-list-sidebar.react';
 import css from './chat-thread-list.css';
 import MessagePreview from './message-preview.react';
 
 type Props = {|
   +item: ChatThreadItem,
   +setModal: (modal: ?React.Node) => void,
 |};
 function ChatThreadListItem(props: Props) {
   const { item, setModal } = props;
   const threadID = item.threadInfo.id;
 
   const onClick = useOnClickThread(threadID);
 
   const timeZone = useSelector((state) => state.timeZone);
   const lastActivity = shortAbsoluteDate(item.lastUpdatedTime, timeZone);
 
   const active = useThreadIsActive(threadID);
   const containerClassName = React.useMemo(
     () =>
       classNames({
         [css.thread]: true,
         [css.activeThread]: active,
       }),
     [active],
   );
 
   const { unread } = item.threadInfo.currentUser;
   const titleClassName = React.useMemo(
     () =>
       classNames({
         [css.title]: true,
         [css.unread]: unread,
       }),
     [unread],
   );
   const lastActivityClassName = React.useMemo(
     () =>
       classNames({
         [css.lastActivity]: true,
         [css.unread]: unread,
         [css.dark]: !unread,
       }),
     [unread],
   );
 
   const { color } = item.threadInfo;
   const colorSplotchStyle = React.useMemo(
     () => ({ backgroundColor: `#${color}` }),
     [color],
   );
 
   const sidebars = item.sidebars.map((sidebarItem) => {
     if (sidebarItem.type === 'sidebar') {
       const { type, ...sidebarInfo } = sidebarItem;
       return (
         <ChatThreadListSidebar
           sidebarInfo={sidebarInfo}
           key={sidebarInfo.threadInfo.id}
         />
       );
     } else {
       return (
         <ChatThreadListSeeMoreSidebars
+          threadInfo={item.threadInfo}
           unread={sidebarItem.unread}
           setModal={setModal}
           key="seeMore"
         />
       );
     }
   });
 
   return (
     <>
       <div className={containerClassName}>
         <a className={css.threadButton} onClick={onClick}>
           <div className={css.threadRow}>
             <div className={titleClassName}>{item.threadInfo.uiName}</div>
             <div className={css.colorSplotch} style={colorSplotchStyle} />
           </div>
           <div className={css.threadRow}>
             <MessagePreview
               messageInfo={item.mostRecentMessageInfo}
               threadInfo={item.threadInfo}
             />
             <div className={lastActivityClassName}>{lastActivity}</div>
           </div>
         </a>
         <ChatThreadListItemMenu
           threadInfo={item.threadInfo}
           mostRecentNonLocalMessage={item.mostRecentNonLocalMessage}
         />
       </div>
       {sidebars}
     </>
   );
 }
 
 export default ChatThreadListItem;
diff --git a/web/chat/chat-thread-list-see-more-sidebars.react.js b/web/chat/chat-thread-list-see-more-sidebars.react.js
index ef6b7b878..c8efdec9c 100644
--- a/web/chat/chat-thread-list-see-more-sidebars.react.js
+++ b/web/chat/chat-thread-list-see-more-sidebars.react.js
@@ -1,39 +1,45 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 import DotsThreeHorizontal from 'react-entypo-icons/lib/entypo/DotsThreeHorizontal';
 
+import type { ThreadInfo } from 'lib/types/thread-types';
+
 import SidebarListModal from '../modals/chat/sidebar-list-modal.react';
 import css from './chat-thread-list.css';
 
 type Props = {|
+  +threadInfo: ThreadInfo,
   +unread: boolean,
   +setModal: (modal: ?React.Node) => void,
 |};
 function ChatThreadListSeeMoreSidebars(props: Props) {
-  const { unread, setModal } = props;
+  const { unread, setModal, threadInfo } = props;
   const onClick = React.useCallback(
-    () => setModal(<SidebarListModal setModal={setModal} />),
-    [setModal],
+    () =>
+      setModal(
+        <SidebarListModal setModal={setModal} threadInfo={threadInfo} />,
+      ),
+    [setModal, threadInfo],
   );
   return (
     <div className={classNames(css.thread, css.sidebar)} onClick={onClick}>
       <a className={css.threadButton}>
         <div className={css.threadRow}>
           <DotsThreeHorizontal className={css.sidebarIcon} />
           <div
             className={classNames([
               css.sidebarTitle,
               unread ? css.unread : null,
             ])}
           >
             See more...
           </div>
         </div>
       </a>
     </div>
   );
 }
 
 export default ChatThreadListSeeMoreSidebars;
diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css
index b339d6281..296cab791 100644
--- a/web/chat/chat-thread-list.css
+++ b/web/chat/chat-thread-list.css
@@ -1,135 +1,140 @@
 div.thread {
   display: flex;
   flex-direction: row;
   padding: 5px 5px 5px 15px;
 }
 div.thread:hover {
   background-color: #EEEEEE;
 }
 div.activeThread {
   background-color: #EEEEEE;
 }
 div.thread div.title {
   font-size: 16px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: black;
 }
 a.threadButton {
   flex: 1;
   cursor: pointer;
   overflow: hidden;
 }
 div.threadRow {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 div.colorSplotch {
   height: 20px;
   width: 20px;
 }
 div.lastActivity {
   font-size: 15px;
   white-space: nowrap;
 }
 
 div.lastMessage {
   font-size: 16px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   flex: 1;
 }
 div.unread {
   color: black;
   font-weight: 600;
 }
 .black {
   color: black;
 }
 div.dark {
   color: #666666;
 }
 .light {
   color: #AAAAAA;
 }
 div.italic {
   font-style: italic;
 }
 
 div.thread div.sidebarTitle {
   flex: 1;
   font-size: 15px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: black;
   align-self: flex-start;
 }
 div.sidebarLastActivity {
   white-space: nowrap;
   font-size: 14px;
 }
 svg.sidebarIcon {
   color: black;
   padding: 0 6px;
   font-size: 20px;
 }
 div.sidebar .menu > button svg {
   font-size: 16px;
 }
 
 .menu {
   position: relative;
   display: flex;
   margin: 0 5px;
 }
 .menu > button {
   background-color: transparent;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   padding: 0 10px;
 }
 .menu > button:hover {
   background-color: #DDDDDD;
 }
 .menu > button:focus {
   outline: none;
 }
 .menu > button svg {
   font-size: 20px;
 }
 
 .menuContent {
   display: none;
   position: absolute;
   top: calc(100% + 1px);
   right: 0;
   z-index: 1;
   width: max-content;
   overflow: hidden;
   background-color: #EEEEEE;
   border-radius: 5px;
   box-shadow: 1px 1px 5px 2px #00000022;
 }
 .menuContentVisible {
   display: block;
 }
 .menuContent ul {
   list-style: none;
 }
 .menuContent li:not(:last-child) {
   border-bottom: 1px solid #DDDDDD;
 }
 .menuContent button {
   border: none;
   cursor: pointer;
   padding: 10px;
   font-size: 16px;
 }
 .menuContent button:hover {
   background-color: #DDDDDD;
 }
+
+ul.list {
+  margin: 5px 3px 10px 0px;
+  overflow: auto;
+}
diff --git a/web/modals/chat/sidebar-list-modal.react.js b/web/modals/chat/sidebar-list-modal.react.js
index 2a7f66fda..68b4e084e 100644
--- a/web/modals/chat/sidebar-list-modal.react.js
+++ b/web/modals/chat/sidebar-list-modal.react.js
@@ -1,27 +1,61 @@
 // @flow
 
+import classNames from 'classnames';
 import * as React from 'react';
 
-import css from '../../style.css';
+import { sidebarInfoSelector } from 'lib/selectors/thread-selectors';
+import type { ThreadInfo } from 'lib/types/thread-types';
+
+import chatThreadListCSS from '../../chat/chat-thread-list.css';
+import SidebarItem from '../../chat/sidebar-item.react';
+import { useSelector } from '../../redux/redux-utils';
+import globalCSS from '../../style.css';
 import Modal from '../modal.react';
 
 type Props = {|
   +setModal: (modal: ?React.Node) => void,
+  +threadInfo: ThreadInfo,
 |};
 function SidebarsListModal(props: Props) {
-  const { setModal } = props;
+  const { setModal, threadInfo } = props;
 
   const clearModal = React.useCallback(() => {
     setModal(null);
   }, [setModal]);
 
+  const sidebarInfos = useSelector(
+    (state) => sidebarInfoSelector(state)[threadInfo.id] ?? [],
+  );
+
+  const sidebars = React.useMemo(
+    () =>
+      sidebarInfos.map((item) => (
+        <div
+          className={classNames(
+            chatThreadListCSS.thread,
+            chatThreadListCSS.sidebar,
+          )}
+          key={item.threadInfo.id}
+          onClick={clearModal}
+        >
+          <SidebarItem sidebarInfo={item} />
+        </div>
+      )),
+    [clearModal, sidebarInfos],
+  );
+
   return (
-    <Modal name="Sidebars" onClose={clearModal}>
-      <div className={css['modal-body']}>
-        <p>Sidebars will be displayed here</p>
+    <Modal name="Sidebars" onClose={clearModal} fixedHeight={false}>
+      <div
+        className={classNames(
+          globalCSS['modal-body'],
+          globalCSS['resized-modal-body'],
+        )}
+      >
+        <ul className={chatThreadListCSS.list}>{sidebars}</ul>
       </div>
     </Modal>
   );
 }
 
 export default SidebarsListModal;
diff --git a/web/modals/history/history.css b/web/modals/history/history.css
index 348505894..0c9642987 100644
--- a/web/modals/history/history.css
+++ b/web/modals/history/history.css
@@ -1,222 +1,222 @@
 div.modalBody {
   position: relative;
-  height: 240px;
+  min-height: 240px;
   overflow: hidden;
   padding: 6px 6px;
   width: 100%;
   box-sizing: border-box;
   background-color: white;
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 15px;
 }
 span.loading {
   position: absolute;
   right: 8px;
   top: 6px;
 }
 span.error {
   position: absolute;
   line-height: 16px;
   font-size: 16px;
   right: 12px;
   top: 6px;
 }
 div.entryHistory {
   position: absolute;
   width: 100%;
   top: 27px;
   box-sizing: border-box;
 }
 div.entryHistoryVisible {
   left: 0;
 }
 div.entryHistoryInvisible {
   left: 100%;
 }
 @keyframes entry-history-visible-animation {
   from { left: 100%; }
   to { left: 0; }
 }
 div.entryHistoryVisibleAnimate {
   left: 0;
   animation-name: entry-history-visible-animation;
   animation-duration: 0.5s;
 }
 @keyframes entry-history-invisible-animation {
   from { left: 0; }
   to { left: 100%; }
 }
 div.entryHistoryInvisibleAnimate {
   left: 100%;
   animation-name: entry-history-invisible-animation;
   animation-duration: 0.5s;
 }
 div.header {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   padding: 5px;
   font-size: 12px;
   font-family: 'Open Sans', sans-serif;
   font-weight: 600;
   background-color: #F4F4F4;
   box-sizing: border-box;
 }
 a.allHistoryButton {
   position: absolute;
   top: 5px;
   left: 7px;
 }
 span.date {
   float: left;
   width: 100%;
   text-align: center;
 }
 div.entryHistory ul {
   overflow: auto;
   height: 211px;
 }
 div.entryHistory li {
   border-bottom: 2px solid lightgray;
   margin: 5px;
   padding-bottom: 8px;
   padding-top: 1px;
 }
 div.entryHistory li:last-child {
   border-bottom: none;
 }
 span.entryAuthor {
   float: left;
   padding-left: 11px;
   font-size: 12px;
   color: gray;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   max-width: 50%;
   box-sizing: border-box;
 }
 span.entryUsername {
   color: #2A5DB0;
 }
 time.entryTime {
   float: right;
   padding-right: 11px;
   font-size: 12px;
   color: gray;
 }
 span.entryThread {
   float: right;
   padding-right: 11px;
   font-size: 12px;
   font-family: 'Open Sans', sans-serif;
   font-weight: 600;
   margin-top: -2px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   max-width: 50%;
   padding-left: 10px;
   box-sizing: border-box;
 }
 div.clear {
   clear: both;
 }
 div.entry {
   padding: 5px;
   box-shadow: inset 0px 0px 0px 2px white;
   border-radius: 5px;
   position: relative;
   margin: 5px;
   font-size: 13px;
   word-break: break-all;
   white-space: pre-wrap;
 }
 div.darkEntry {
   color: white;
 }
 div.dayHistory {
   position: absolute;
   width: 100%;
   top: 27px;
   box-sizing: border-box;
 }
 div.dayHistoryVisible {
   left: 0;
 }
 div.dayHistoryInvisible {
   left: -100%;
 }
 @keyframes day-history-visible-animation {
   from { left: -100%; }
   to { left: 0; }
 }
 div.dayHistoryVisibleAnimate {
   left: 0;
   animation-name: day-history-visible-animation;
   animation-duration: 0.5s;
 }
 @keyframes day-history-invisible-animation {
   from { left: 0; }
   to { left: -100%; }
 }
 div.dayHistoryInvisibleAnimate {
   left: -100%;
   animation-name: day-history-invisible-animation;
   animation-duration: 0.5s;
 }
 div.dayHistory ul {
   overflow: auto;
   height: 211px;
 }
 div.dayHistory li {
   padding-bottom: 2px;
 }
 div.dayHistory li:last-child {
   padding-bottom: 8px;
 }
 span.deletedEntry {
   float: left;
   padding-top: 2px;
   padding-left: 11px;
   font-size: 12px;
   line-height: 17px;
 }
 span.deletedEntryLabel {
   color: red;
   font-style: italic;
 }
 span.restoreEntryLabel {
   padding-left: 5px;
 }
 span.restoreLoading {
   position: relative;
   top: 2px;
   left: 5px;
   width: 12px;
 }
 span.restoreError {
   position: relative;
   top: 1px;
   left: 7px;
   font-size: 15px;
 }
 a.revisionHistoryButton {
   float: right;
   padding-top: 2px;
   padding-right: 11px;
   font-size: 12px;
   font-weight: bold;
 }
 div.restored {
   font-style: italic;
   font-size: 13px;
   padding-left: 11px;
 }
 div.deleted {
   font-style: italic;
   font-size: 13px;
   padding-left: 11px;
   color: red;
 }
diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
index 8b2f8eddd..77a5c4796 100644
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -1,82 +1,87 @@
 // @flow
 
 import classNames from 'classnames';
 import invariant from 'invariant';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 
 import css from '../style.css';
 
 export type ModalSize = 'small' | 'large';
 type Props = {
   name: string,
   onClose: () => void,
   children?: React.Node,
   size?: ModalSize,
+  fixedHeight?: boolean,
 };
 
 class Modal extends React.PureComponent<Props> {
-  static defaultProps = { size: 'small' };
+  static defaultProps = { size: 'small', fixedHeight: true };
   overlay: ?HTMLDivElement;
 
   componentDidMount() {
     invariant(this.overlay, 'overlay ref unset');
     this.overlay.focus();
   }
 
   render() {
     const overlayClasses = classNames(
       css['modal-overlay'],
       { [css['small-modal-overlay']]: this.props.size === 'small' },
       { [css['large-modal-overlay']]: this.props.size === 'large' },
+      { [css['resizable-modal-overlay']]: !this.props.fixedHeight },
     );
     const modalContainerClasses = classNames(css['modal-container'], {
       [css['large-modal-container']]: this.props.size === 'large',
     });
+    const modalClasses = classNames(css['modal'], {
+      [css['fixed-height-modal']]: this.props.fixedHeight,
+    });
     return (
       <div
         className={overlayClasses}
         ref={this.overlayRef}
         onClick={this.onBackgroundClick}
         tabIndex={0}
         onKeyDown={this.onKeyDown}
       >
         <div className={modalContainerClasses}>
-          <div className={css['modal']}>
+          <div className={modalClasses}>
             <div className={css['modal-header']}>
               <span className={css['modal-close']} onClick={this.props.onClose}>
                 ×
               </span>
               <h2>{this.props.name}</h2>
             </div>
             {this.props.children}
           </div>
         </div>
       </div>
     );
   }
 
   overlayRef = (overlay: ?HTMLDivElement) => {
     this.overlay = overlay;
   };
 
   onBackgroundClick = (event: SyntheticEvent<HTMLDivElement>) => {
     if (event.target === this.overlay) {
       this.props.onClose();
     }
   };
 
   onKeyDown = (event: SyntheticKeyboardEvent<HTMLDivElement>) => {
     if (event.keyCode === 27) {
       this.props.onClose();
     }
   };
 }
 
 Modal.propTypes = {
   name: PropTypes.string.isRequired,
   onClose: PropTypes.func.isRequired,
   size: PropTypes.oneOf(['small', 'large']),
 };
 
 export default Modal;
diff --git a/web/style.css b/web/style.css
index cc613f990..d2f7a0cbd 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,613 +1,636 @@
 * {
   padding: 0;
   margin: 0;
   -ms-overflow-style: -ms-autohiding-scrollbar;
 }
 html {
   height: 100%;
 }
 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
     "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
     "Helvetica Neue", sans-serif;
   background-image: url(../images/background.png);
   background-size: 3000px 2000px;
   background-attachment: fixed;
   height: 100%;
   overflow: hidden;
 }
 a {
   text-decoration: none;
   color: #2A5DB0;
 }
 img, iframe {
   display: block;
 }
 input[type='text'], input[type='password'], textarea {
   -webkit-appearance: none;
   -moz-appearance: none;
   -webkit-border-radius: 0;
   border: 1px solid #DDDDDD;
   border-radius: 1px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
     "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
     "Helvetica Neue", sans-serif;
 }
 input[type='submit'] {
   -webkit-appearance: none;
   -moz-appearance: none;
   -webkit-border-radius: 0;
 }
 input[type='submit']::-moz-focus-inner {
   border: 0;
   padding: 0;
 }
 :global(#react-root) {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
 
 header.header {
   flex: 0 1 auto;
   background-image: url(../images/background.png);
   background-size: 3000px 2000px;
   background-attachment: fixed;
   z-index: 1;
 }
 div.main-header {
   font-family: 'Anaheim', sans-serif;
   height: 62px;
 }
 div.main-header > h1 {
   position: absolute;
   padding-top: 5px;
   padding-left: 16px;
   color: white;
   font-size: 38px;
 }
 ul.nav-bar {
   position: absolute;
   padding-left: 180px;
 }
 ul.nav-bar > li {
   display: inline-block;
   list-style-type: none;
   font-family: 'Open Sans', sans-serif;
   font-size: 18px;
   font-weight: 600;
   cursor: pointer;
   text-transform: uppercase;
 }
 ul.nav-bar > li.current-tab {
   background-image: url(../images/background.png);
   background-size: 3000px 2000px;
   background-attachment: fixed;
   cursor: default;
 }
 ul.nav-bar > li > div {
   padding: 3px 20px 3px 20px;
 }
 ul.nav-bar > li > div > a {
   color: #FFFFFF;
 }
 ul.nav-bar > li.current-tab > div > a {
   color: #444444;
 }
 ul.nav-bar > li.current-tab > div {
   background-color: rgba(255,255,255,0.84);
   padding: 18px 20px 19px 20px;
   height: 25px;
 }
 svg.nav-bar-icon {
   padding-right: 8px;
   font-size: 20px;
 }
 div.chatBadge {
   display: inline-block;
   box-sizing: border-box;
   width: 25px;
   height: 25px;
   margin-left: 8px;
   color: white;
   background-color: red;
   border-radius: 13px;
   font-size: 18px;
   text-align: center;
 }
 
 div.main-content-container {
   flex: 1 0 0;
   position: relative;
   min-height: 0;
 }
 div.main-content {
   background-color: rgba(255,255,255,0.84);
   height: 100%;
   overflow-x: hidden;
 }
 
 div.upper-right {
   position: absolute;
   top: 0;
   right: 0;
   padding: 15px 16px;
 }
 span.loading-indicator-loading {
   display: inline-block;
 }
 @keyframes loading-indicator-loading {
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
 }
 span.loading-indicator-loading {
   display: inline-block;
 }
 span.loading-indicator-loading-medium:after {
   content: " ";
   display: block;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   border: 3px solid #fff;
   border-color: #fff transparent #fff transparent;
   animation-name: loading-indicator-loading;
   animation-duration: 1.2s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
 span.loading-indicator-loading-large:after {
   content: " ";
   display: block;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   border: 3px solid #fff;
   border-color: #fff transparent #fff transparent;
   animation-name: loading-indicator-loading;
   animation-duration: 1.2s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
 span.loading-indicator-loading-small:after {
   content: " ";
   display: block;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   border: 2px solid #fff;
   border-color: #fff transparent #fff transparent;
   animation-name: loading-indicator-loading;
   animation-duration: 1.2s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
 span.loading-indicator-black:after {
   border-color: #000 transparent #000 transparent;
 }
 span.loading-indicator-error {
   font-weight: bold;
   color: white;
   line-height: 0;
 }
 span.loading-indicator-error-black {
   font-weight: bold;
   color: red;
   line-height: 0;
 }
 
 div.account-bar {
   background-color: #F8F8F8;
   border: 1px solid #C8C8C8;
   border-radius: 5px;
   font-family: 'Open Sans', sans-serif;
   font-weight: 600;
   padding: 0 6px;
   cursor: pointer;
   float: right;
 }
 div.account-button {
   padding: 3px 4px 3px 8px;
 }
 div.account-button > span {
   font-size: 16px;
 }
 div.account-menu {
   outline: none;
 }
 div.account-menu > div {
   border-top: 1px solid #C8C8C8;
   padding: 3px 4px 3px 8px;
 }
 span.username {
   display: inline-block;
   color: #2A5DB0;
   cursor: pointer;
 }
 svg.account-caret {
   padding-left: 6px;
   fill: #2A5DB0;
   cursor: pointer;
   height: 10px;
   width: 10px;
 }
 
 div.modal-overlay {
   position: fixed;
   left: 0;
   top: 0;
+  bottom: 0;
   z-index: 4;
   width: 100%;
-  height: 100%;
   background-color: rgba(0,0,0,0.4);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   overflow: auto;
 }
+div.resizable-modal-overlay {
+  min-height: 60px;
+}
 div.small-modal-overlay {
   padding-top: 100px;
 }
 div.large-modal-overlay {
   padding-top: 50px;
 }
 div.modal-container {
   background-image: url(../images/background.png);
   background-size: 3000px 2000px;
-  background-attachment: fixed;
-  margin: auto;
   max-width: 330px;
   border-radius: 15px;
+  display: flex;
+  min-height: 0;
+  max-height: 500px;
 }
 div.large-modal-container {
   max-width: 500px;
 }
 div.modal {
   position: relative;
   box-shadow: 0 4px 20px rgba(0, 0, 0, .3),
     0 0 0 1px rgba(0, 0, 0, .1);
-  background-color: rgba(255,255,255,0.71);
+  background-color: rgba(255,255,255,0.61);
   border-radius: 15px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 330px;
+}
+div.large-modal-container div.modal {
+  width: 500px;
+}
+div.fixed-height-modal {
+  height: 100%;
 }
 span.modal-close {
   float: right;
   font-size: 32px;
   font-weight: 300;
   line-height: 30px;
 }
 span.modal-close:hover {
   color: black;
   cursor: pointer;
 }
 div.modal-header {
   padding: 8px 15px;
   font-family: 'Open Sans', sans-serif;
 }
 div.modal-header > h2 {
   font-size: 22px;
   font-weight: 300;
 }
 div.modal-body {
   padding: 6px 6px;
   width: 100%;
   box-sizing: border-box;
   background-color: white;
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 15px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+div.resized-modal-body {
+  min-height: 250px;
 }
 div.modal-body p {
   padding: 1px 3px 4px 3px;
   font-size: 14px;
   text-align: center;
 }
 div.modal-body p.form-pre-footer {
   padding-top: 5px;
   font-size: 12px;
   font-style: italic;
 }
 div.modal-body input, div.modal-body textarea {
   margin: 3px;
 }
 div.modal-body input[type='text'],
 div.modal-body input[type='password'],
 div.modal-body textarea {
   font-size: 14px;
   padding: 1px;
   width: 175px;
 }
 div.large-modal-container div.modal-body input[type='text'],
 div.large-modal-container div.modal-body input[type='password'],
 div.large-modal-container div.modal-body textarea {
   width: 275px;
 }
 div.modal-body input[type='submit'] {
   padding: 3px 9px;
   font-size: 12px;
   margin-right: 3px;
   border-radius: 3px;
   border: 1px solid #C8C8C8;
   background-color: #F8F8F8;
   font-family: 'Open Sans', sans-serif;
   font-weight: 600;
   color: #444444;
   margin-top: 1px;
   cursor: pointer;
 }
 div.modal-body input[type='submit']:hover {
   text-decoration: underline;
 }
 div.modal-body input[type='submit']:disabled {
   cursor: initial;
   text-decoration: none;
   color: #999999;
 }
 
 div.modal-body div.form-title {
   display: inline-block;
   text-align: right;
   padding-right: 5px;
   padding-top: 5px;
   font-size: 14px;
   font-family: 'Open Sans', sans-serif;
   font-weight: 600;
   vertical-align: top;
   width: 110px;
 }
 div.large-modal-container div.modal-body div.form-title {
   width: 140px;
 }
 div.modal-body div.form-content {
   display: inline-block;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
     "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
     "Helvetica Neue", sans-serif;
   font-size: 15px;
 }
 div.modal-body div.form-subtitle {
   font-size: 12px;
   padding-left: 4px;
   font-style: italic;
 }
 
 div.form-enum-selector {
   display: inline-block;
   padding-bottom: 4px;
 }
 div.form-enum-selector > div.form-enum-container {
   padding-top: 5px;
 }
 div.form-enum-selector > div.form-enum-container > input {
   vertical-align: top;
   margin-top: 4px;
 }
 div.form-enum-selector div.form-enum-option {
   font-weight: bold;
   display: inline-block;
   font-size: 15px;
   font-family: 'Open Sans', sans-serif;
   font-weight: 600;
   padding-left: 3px;
 }
 div.form-enum-selector span.form-enum-description {
   display: block;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
     "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
     "Helvetica Neue", sans-serif;
   font-weight: normal;
   font-size: 13px;
   max-width: 260px;
   color: gray;
 }
 div.color-title {
   margin-top: 4px;
 }
 
 div.modal-body div.form-footer {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   align-items: start;
   margin-top: 5px;
   border-top: 2px solid #EFEFEF;
   min-height: 26px;
   padding: 7px 4px 4px 0;
 }
 div.modal-body div.form-footer div.modal-form-error {
   font-size: 12px;
   color: red;
   font-style: italic;
   padding-left: 6px;
   align-self: center;
 }
 div.modal-body div.form-footer div.modal-form-error ol {
   padding-left: 20px;
 }
 
 div.form-text > div.form-title {
   vertical-align: initial;
 }
 div.form-text > div.form-content {
   margin-left: 3px;
   margin-bottom: 3px;
 }
 
 div.form-text > div.form-float-title {
   float: left;
   text-align: right;
   padding-right: 5px;
   font-size: 14px;
   font-family: 'Open Sans', sans-serif;
   font-weight: 600;
   width: 110px;
 }
 div.form-text > div.form-float-content {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 14px;
   padding: 1px 20px 3px 4px;
   margin-top: 5px;
 }
 
 .verified-status-true {
   color: green;
 }
 .verified-status-false {
   color: red;
 }
 
 .hidden {
   display: none;
 }
 .italic {
   font-style: italic;
 }
 
 div.edit-thread-color-container {
   margin-top: -5px;
 }
 div.form-textarea-container {
   margin-top: 1px;
 }
 div.edit-thread-privacy-container {
   margin-bottom: 6px;
 }
 div.edit-thread-account-password {
   border-top: 2px solid #EFEFEF;
   padding-top: 4px;
   margin-top: 2px;
 }
 div.user-settings-current-password {
   border-top: 2px solid #EFEFEF;
   padding-top: 4px;
   margin-top: 5px;
 }
 div.modal-body p.confirm-account-password {
   padding: 3px 0px 5px 0px;
   font-style: italic;
   font-size: 13px;
   color: #777777;
 }
 ul.tab-panel {
   background-color: #F4F4F4;
   padding-left: 10px;
   padding-top: 5px;
 }
 ul.tab-panel > li {
   display: inline-block;
   list-style-type: none;
   font-family: 'Open Sans', sans-serif;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   padding: 3px 10px 3px 10px;
 }
 ul.tab-panel > li.current-tab {
   background-color: white;
   border-radius: 5px 5px 0 0;
   cursor: default;
 }
 ul.tab-panel > li > a {
   color: #555555;
 }
 ul.tab-panel > li.current-tab > a {
   color: #123a7b;
   cursor: default;
 }
 ul.tab-panel > li.delete-tab > a {
   color: #ff0000 !important;
 }
 
 div.new-thread-privacy-container {
   margin-bottom: 3px;
   margin-top: -6px;
 }
 
 span.page-loading {
   margin-top: 5px;
   margin-right: 12px;
   float: left;
 }
 span.page-error {
   margin: 15px;
   font-size: 42px;
   float: left;
   color: red;
 }
 
 div.color-picker-container {
   outline: none;
   position: relative;
 }
 div.color-picker-button {
   margin: 6px 3px;
   overflow: hidden;
   cursor: pointer;
   padding: 4px;
   display: inline-block;
   border: solid 1px darkgray;
   background: #eee;
   color: #333;
   vertical-align: middle;
   border-radius: 3px;
 }
 div.color-picker-preview {
   width: 25px;
   height: 16px;
   border: solid 1px #222;
   margin-right: 5px;
   float: left;
   z-index: 0;
 }
 div.color-picker-down-symbol {
   padding: 1px 0;
   height: 16px;
   line-height: 16px;
   float: left;
   font-size: 10px;
 }
 div.color-picker-selector {
   position: absolute;
   left: 4px;
   top: 34px;
 }
 
 div.intro-modal {
   padding: 10px 21px 12px 21px;
   border-radius: 5px;
   border: 1px solid #C8C8C8;
   background-color: #F8F8F8;
   width: 310px;
   position: fixed;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
     "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
     "Helvetica Neue", sans-serif;
   margin-top: 100px;
   box-shadow: 2px 3px 6px 0px rgba(0, 0, 0, 0.1);
 }
 
 @media
   only screen and (-webkit-min-device-pixel-ratio: 2.0),
   only screen and (min--moz-device-pixel-ratio: 2.0),
   only screen and (-o-min-device-pixel-ratio: 2.0/1),
   only screen and (min-device-pixel-ratio: 2.0),
   only screen and (min-resolution: 320dpi),
   only screen and (min-resolution: 2.0dppx) {
   header.header,
   header.main-header,
   div.splash-header-container,
   div.splash-top-container,
   div.splash-bottom,
   div.modal-container,
   ul.nav-bar > li.current-tab,
   div.calendar-filters-container {
     background-image: url(../images/background@2x.png);
   }
 }
 
 @media (hover: none) {
   div.splash-header-container, div.splash-top-container, div.splash-bottom {
     background-attachment: initial;
   }
 }