Responsive styles for portrait orientation phones

ui/v2.5/.stylelintrc

@@ -49,7 +49,7 @@
     "function-whitespace-after": "always",
     "length-zero-no-unit": true,
     "max-empty-lines": 1,
-    "max-nesting-depth": 3,
+    "max-nesting-depth": 4,
     "max-line-length": 100,
     "media-feature-colon-space-after": "always",
     "media-feature-colon-space-before": "never",

ui/v2.5/src/App.tsx

@@ -22,7 +22,7 @@ export const App: React.FC = () => (
     <ErrorBoundary>
       <ToastProvider>
         <MainNavbar />
-        <div className="main">
+        <div className="main container-fluid">
           <Switch>
             <Route exact path="/" component={Stats} />
             <Route path="/scenes" component={Scenes} />

ui/v2.5/src/components/MainNavbar.tsx

@@ -64,13 +64,18 @@ export const MainNavbar: React.FC = () => {
     );
 
   return (
-    <Navbar fixed="top" variant="dark" bg="dark">
+    <Navbar fixed="top" variant="dark" bg="dark" className="top-nav">
       <Navbar.Brand as="div">
         <Link to="/">
-          <Button className="minimal">Stash</Button>
+          <Button className="minimal brand-link d-none d-sm-inline-block">
+            Stash
+          </Button>
+          <Button className="minimal brand-icon d-inline d-sm-none">
+            <img src="http://192.168.1.65:9999/favicon.ico" alt="" />
+          </Button>
         </Link>
       </Navbar.Brand>
-      <Nav className="mr-auto">
+      <Nav className="mr-md-auto">
         {menuItems.map(i => (
           <LinkContainer
             activeClassName="active"
@@ -80,13 +85,15 @@ export const MainNavbar: React.FC = () => {
           >
             <Button className="minimal">
               <Icon icon={i.icon} />
-              <span>{i.text}</span>
+              <span className="d-none d-sm-inline">{i.text}</span>
             </Button>
           </LinkContainer>
         ))}
       </Nav>
       <Nav>
-        {newButton}
+        <div className="d-none d-sm-block">
+          {newButton}
+        </div>
         <LinkContainer exact to="/settings">
           <Button className="minimal">
             <Icon icon="cog" />

ui/v2.5/src/components/SceneFilenameParser/ParserInput.tsx

@@ -134,7 +134,7 @@ export const ParserInput: React.FC<IParserInputProps> = (props: IParserInputProp
           <InputGroup.Append>
             <DropdownButton id="parser-field-select" title="Add Field">
               {validFields.map(item => (
-                <Dropdown.Item onSelect={() => addParserField(item)}>
+                <Dropdown.Item key={item.field} onSelect={() => addParserField(item)}>
                   <span>{item.field}</span>
                   <span className="ml-auto">{item.helperText}</span>
                 </Dropdown.Item>
@@ -184,7 +184,7 @@ export const ParserInput: React.FC<IParserInputProps> = (props: IParserInputProp
       <Form.Group>
         <DropdownButton variant="secondary" id="recipe-select" title="Select Parser Recipe">
           {builtInRecipes.map(item => (
-            <Dropdown.Item onSelect={() => setParserRecipe(item)}>
+            <Dropdown.Item key={item.pattern} onSelect={() => setParserRecipe(item)}>
               <span>{item.pattern}</span>
               <span className="mr-auto">{item.description}</span>
             </Dropdown.Item>

ui/v2.5/src/components/SceneFilenameParser/ShowFields.tsx

@@ -20,7 +20,8 @@ export const ShowFields = (props: IShowFieldsProps) => {
   }
 
   const fieldRows = [...props.fields.entries()].map(([label, enabled]) => (
-    <div
+    <Button
+      className="minimal d-block"
       key={label}
       onClick={() => {
         handleClick(label);
@@ -28,7 +29,7 @@ export const ShowFields = (props: IShowFieldsProps) => {
     >
       <Icon icon={enabled ? "check" : "times"} />
       <span>{label}</span>
-    </div>
+    </Button>
   ));
 
   return (

ui/v2.5/src/components/Settings/SettingsConfigurationPanel.tsx

@@ -174,7 +174,7 @@ export const SettingsConfigurationPanel: React.FC = () => {
         <Form.Group id="database-path">
           <h6>Database Path</h6>
           <Form.Control
-            className="col-6"
+            className="col col-sm-6"
             defaultValue={databasePath}
             onChange={(e: any) => setDatabasePath(e.target.value)}
           />
@@ -186,7 +186,7 @@ export const SettingsConfigurationPanel: React.FC = () => {
         <Form.Group id="generated-path">
           <h6>Generated Path</h6>
           <Form.Control
-            className="col-6"
+            className="col col-sm-6"
             defaultValue={generatedPath}
             onChange={(e: any) => setGeneratedPath(e.target.value)}
           />
@@ -203,7 +203,7 @@ export const SettingsConfigurationPanel: React.FC = () => {
               && excludes.map((regexp, i) => (
                   <InputGroup>
                     <Form.Control
-                      className="col-6"
+                      className="col col-sm-6"
                       value={regexp}
                       onChange={(e: any) =>
                         excludeRegexChanged(i, e.target.value)
@@ -246,7 +246,7 @@ export const SettingsConfigurationPanel: React.FC = () => {
         <Form.Group id="transcode-size">
           <h6>Maximum transcode size</h6>
           <Form.Control
-            className="col-6"
+            className="col col-sm-6"
             as="select"
             onChange={(event: React.FormEvent<HTMLSelectElement>) =>
               setMaxTranscodeSize(translateQuality(event.currentTarget.value))
@@ -266,7 +266,7 @@ export const SettingsConfigurationPanel: React.FC = () => {
         <Form.Group id="streaming-transcode-size">
           <h6>Maximum streaming transcode size</h6>
           <Form.Control
-            className="col-6"
+            className="col col-sm-6"
             as="select"
             onChange={(event: React.FormEvent<HTMLSelectElement>) =>
               setMaxStreamingTranscodeSize(
@@ -294,7 +294,7 @@ export const SettingsConfigurationPanel: React.FC = () => {
         <Form.Group id="username">
           <h6>Username</h6>
           <Form.Control
-            className="col-6"
+            className="col col-sm-6"
             defaultValue={username}
             onChange={(e: React.FormEvent<HTMLInputElement>) =>
               setUsername(e.currentTarget.value)
@@ -307,7 +307,7 @@ export const SettingsConfigurationPanel: React.FC = () => {
         <Form.Group id="password">
           <h6>Password</h6>
           <Form.Control
-            className="col-6"
+            className="col col-sm-6"
             type="password"
             defaultValue={password}
             onChange={(e: React.FormEvent<HTMLInputElement>) =>
@@ -326,7 +326,7 @@ export const SettingsConfigurationPanel: React.FC = () => {
       <Form.Group id="log-file">
         <h6>Log file</h6>
         <Form.Control
-          className="col-6"
+          className="col col-sm-6"
           defaultValue={logFile}
           onChange={(e: React.FormEvent<HTMLInputElement>) =>
             setLogFile(e.currentTarget.value)
@@ -354,7 +354,7 @@ export const SettingsConfigurationPanel: React.FC = () => {
       <Form.Group id="log-level">
         <h6>Log Level</h6>
         <Form.Control
-          className="col-6"
+          className="col col-sm-6"
           as="select"
           onChange={(event: React.FormEvent<HTMLSelectElement>) =>
             setLogLevel(event.currentTarget.value)

ui/v2.5/src/components/Settings/SettingsInterfacePanel.tsx

@@ -103,7 +103,7 @@ export const SettingsInterfacePanel: React.FC = () => {
         <Form.Group id="max-loop-duration">
           <Form.Label>Maximum loop duration</Form.Label>
           <DurationInput
-            className="col-4"
+            className="col col-sm-4"
             numericValue={maximumLoopDuration}
             onValueChange={duration => setMaximumLoopDuration(duration)}
           />
@@ -129,7 +129,7 @@ export const SettingsInterfacePanel: React.FC = () => {
           value={css}
           onChange={(e: any) => setCSS(e.target.value)}
           rows={16}
-          className="col-6"
+          className="col col-sm-6"
         ></Form.Control>
         <Form.Text className="text-muted">
           Page must be reloaded for changes to take effect.

ui/v2.5/src/components/Settings/SettingsLogsPanel.tsx

@@ -40,7 +40,7 @@ const LogElement: React.FC<ILogElementProps> = ({ logEntry }) => {
     <div className="row">
       <span className="log-time">{logEntry.time}</span>
       <span className={`${levelClass(logEntry.level)}`}>{level}</span>
-      <span className="col-9">{logEntry.message}</span>
+      <span className="col col-sm-9">{logEntry.message}</span>
     </div>
   );
 };
@@ -99,9 +99,9 @@ export const SettingsLogsPanel: React.FC = () => {
     <>
       <h4>Logs</h4>
       <Form.Row id="log-level">
-        <Form.Label className="col-2">Log Level</Form.Label>
+        <Form.Label className="col-6 col-sm-2">Log Level</Form.Label>
         <Form.Control
-          className="col-2"
+          className="col-6 col-sm-2"
           as="select"
           defaultValue={logLevel}
           onChange={event => setLogLevel(event.currentTarget.value)}

ui/v2.5/src/components/Shared/DetailsEditNavbar.tsx

@@ -43,7 +43,7 @@ export const DetailsEditNavbar: React.FC<IProps> = (props: IProps) => {
   function renderDeleteButton() {
     if (props.isNew || props.isEditing) return;
     return (
-      <Button variant="danger" className="delete" onClick={() => setIsDeleteAlertOpen(true)}>
+      <Button variant="danger" className="delete d-none d-sm-block" onClick={() => setIsDeleteAlertOpen(true)}>
         Delete
       </Button>
     );

ui/v2.5/src/components/Shared/FolderSelect/FolderSelect.tsx

@@ -65,7 +65,7 @@ export const FolderSelect: React.FC<IProps> = (props: IProps) => {
             <ul className="folder-list">
               {selectableDirectories.map(path => {
                 return (
-                  <li className="folder-item">
+                  <li key={path} className="folder-item">
                     <Button
                       variant="link"
                       key={path}

ui/v2.5/src/components/Stats.tsx

@@ -10,46 +10,44 @@ export const Stats: React.FC = () => {
   if (error) return <span>error.message</span>;
 
   return (
-    <div className="w-75 m-auto">
+    <div className="mt-5">
-      <nav className="w-75 m-auto d-flex flex-row">
+      <div className="col col-sm-8 m-sm-auto">
-        <div className="flex-grow-1">
+        <nav className="col col-sm-8 m-sm-auto row">
-          <div>
+          <div className="flex-grow-1">
-            <p className="heading">Scenes</p>
+            <div>
-            <p className="title">{data.stats.scene_count}</p>
+              <p className="heading">Scenes</p>
+              <p className="title">{data.stats.scene_count}</p>
+            </div>
           </div>
-        </div>
+          <div className="flex-grow-1">
-        <div className="flex-grow-1">
+            <div>
-          <div>
+              <p className="heading">Galleries</p>
-            <p className="heading">Galleries</p>
+              <p className="title">{data.stats.gallery_count}</p>
-            <p className="title">{data.stats.gallery_count}</p>
+            </div>
           </div>
-        </div>
+          <div className="flex-grow-1">
-        <div className="flex-grow-1">
+            <div>
-          <div>
+              <p className="heading">Performers</p>
-            <p className="heading">Performers</p>
+              <p className="title">{data.stats.performer_count}</p>
-            <p className="title">{data.stats.performer_count}</p>
+            </div>
           </div>
-        </div>
+          <div className="flex-grow-1">
-        <div className="flex-grow-1">
+            <div>
-          <div>
+              <p className="heading">Studios</p>
-            <p className="heading">Studios</p>
+              <p className="title">{data.stats.studio_count}</p>
-            <p className="title">{data.stats.studio_count}</p>
+            </div>
           </div>
-        </div>
+          <div className="flex-grow-1">
-        <div className="flex-grow-1">
+            <div>
-          <div>
+              <p className="heading">Tags</p>
-            <p className="heading">Tags</p>
+              <p className="title">{data.stats.tag_count}</p>
-            <p className="title">{data.stats.tag_count}</p>
+            </div>
           </div>
-        </div>
+        </nav>
-      </nav>
 
-      <h5>Notes</h5>
+        <h5>Notes</h5>
-      <pre>
+        <em>This is still an early version, some things are still a work in progress.</em>
-        {`
+      </div>
-        This is still an early version, some things are still a work in progress.
-        `}
-      </pre>
     </div>
   );
 };

ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx

@@ -149,7 +149,7 @@ export const Studio: React.FC = () => {
 
   return (
     <div className="row">
-      <div className={cx('studio-details', { 'col-4': !isNew, 'col-8': isNew})}>
+      <div className={cx('studio-details', { 'col ml-sm-5': !isNew, 'col-8': isNew})}>
         { isNew && <h2>Add Studio</h2> }
         <img className="logo" alt={name} src={imagePreview} />
         <Table id="performer-details" style={{ width: "100%" }}>
@@ -180,7 +180,7 @@ export const Studio: React.FC = () => {
         />
       </div>
       { !isNew && (
-        <div className="col-8">
+        <div className="col-12 col-sm-8">
           <StudioScenesPanel studio={studio} />
         </div>
       )}

ui/v2.5/src/components/Studios/styles.scss

@@ -1,6 +1,4 @@
 .studio-details {
-  padding-left: 4rem;
-
   .logo {
     margin: 4rem 0;
     width: 100%;

ui/v2.5/src/components/Wall/Wall.scss

@@ -93,6 +93,10 @@
     position: relative;
     width: 20%;
 
+    @media (max-width: 576px) {
+      width: 100%;
+    }
+
     video,
     img {
       height: 100%;

ui/v2.5/src/components/Wall/WallPanel.tsx

@@ -104,7 +104,7 @@ export const WallPanel: React.FC<IWallPanelProps> = (
     return (
       <>
         <div className={`wall-overlay ${overlayClassName}`} />
-        <div className="wall grid">
+        <div className="wall grid row">
           {maybeRenderScenes()}
           {maybeRenderSceneMarkers()}
         </div>

ui/v2.5/src/components/list/ListFilter.tsx

@@ -228,7 +228,7 @@ export const ListFilter: React.FC<IListFilterProps> = (
     if (props.onChangeZoom) {
       return (
         <Form.Control
-          className="zoom-slider col-1"
+          className="zoom-slider col-1 d-none d-sm-block"
           type="range"
           min={0}
           max={3}
@@ -249,14 +249,14 @@ export const ListFilter: React.FC<IListFilterProps> = (
             placeholder="Search..."
             defaultValue={props.filter.searchTerm}
             onChange={onChangeQuery}
-            className="filter-item"
+            className="filter-item col-5 col-sm-2"
             style={{ width: "inherit" }}
           />
           <Form.Control
             as="select"
             onChange={onChangePageSize}
             value={props.filter.itemsPerPage.toString()}
-            className="filter-item col-1"
+            className="filter-item col-1 d-none d-sm-inline"
           >
             {PAGE_SIZE_OPTIONS.map(s => (
               <option value={s} key={s}>{s}</option>
@@ -298,13 +298,13 @@ export const ListFilter: React.FC<IListFilterProps> = (
             editingCriterion={editingCriterion}
           />
 
-          <ButtonGroup className="filter-item">
+          <ButtonGroup className="filter-item d-none d-sm-inline-flex">
             {renderDisplayModeOptions()}
           </ButtonGroup>
 
           {maybeRenderZoom()}
 
-          <ButtonGroup className="filter-item">{renderMore()}</ButtonGroup>
+          <ButtonGroup className="filter-item d-none d-sm-inline-flex">{renderMore()}</ButtonGroup>
         </div>
         <div
           style={{

ui/v2.5/src/components/list/Pagination.tsx

@@ -37,9 +37,20 @@ export const Pagination: React.FC<IPaginationProps> = ({
     i => startPage + i
   );
 
+  const calculatePageClass = (buttonPage:number) => {
+    if(pages.length <= 4) return '';
+
+    if(currentPage === 1 && buttonPage <= 4) return '';
+    const maxPage = pages[pages.length - 1];
+    if(currentPage === maxPage && buttonPage > (maxPage - 3)) return '';
+    if(Math.abs(buttonPage - currentPage) <= 1) return '';
+    return 'd-none d-sm-block'
+  }
+
   const pageButtons = pages.map((page: number) => (
     <Button
       variant="secondary"
+      className={calculatePageClass(page)}
       key={page}
       active={currentPage === page}
       onClick={() => onChangePage(page)}
@@ -54,9 +65,11 @@ export const Pagination: React.FC<IPaginationProps> = ({
   return (
     <ButtonGroup className="filter-container pagination">
       <Button variant="secondary" disabled={currentPage === 1} onClick={() => onChangePage(1)}>
-        First
+        <span className="d-none d-sm-inline">First</span>
+        <span className="d-inline d-sm-none">&#x300a;</span>
       </Button>
       <Button
+        className="d-none d-sm-block"
         variant="secondary"
         disabled={currentPage === 1}
         onClick={() => onChangePage(currentPage - 1)}
@@ -65,6 +78,7 @@ export const Pagination: React.FC<IPaginationProps> = ({
       </Button>
       {pageButtons}
       <Button
+        className="d-none d-sm-block"
         variant="secondary"
         disabled={currentPage === totalPages}
         onClick={() => onChangePage(currentPage + 1)}
@@ -76,7 +90,8 @@ export const Pagination: React.FC<IPaginationProps> = ({
         disabled={currentPage === totalPages}
         onClick={() => onChangePage(totalPages)}
       >
-        Last
+        <span className="d-none d-sm-inline">Last</span>
+        <span className="d-inline d-sm-none">&#x300b;</span>
       </Button>
     </ButtonGroup>
   );

ui/v2.5/src/components/performers/PerformerDetails/Performer.tsx

@@ -164,7 +164,7 @@ export const Performer: React.FC = () => {
   }
 
   const renderIcons = () => (
-    <span className="name-icons">
+    <span className="name-icons d-block d-sm-inline">
       <Button
         className={cx('minimal', performer.favorite ? "favorite" : "not-favorite")}
         onClick={() => setFavorite(!performer.favorite)}
@@ -217,19 +217,26 @@ export const Performer: React.FC = () => {
 
   return (
     <div id="performer-page" className="row">
-      <div className="image-container col-4 offset-1">
+      <div className="image-container col-sm-4 offset-sm-1 d-none d-sm-block">
         <Button variant="link" onClick={() => setLightboxIsOpen(true)}>
           <img className="performer" src={imagePreview} alt="Performer" />
         </Button>
       </div>
-      <div className="col-6">
+      <div className="col col-sm-6">
-        <div className="performer-head">
+        <div className="row">
-          <h2>
+          <div className="image-container col-6 d-block d-sm-none">
-            {performer.name}
+            <Button variant="link" onClick={() => setLightboxIsOpen(true)}>
-            {renderIcons()}
+              <img className="performer" src={imagePreview} alt="Performer" />
-          </h2>
+            </Button>
-          {maybeRenderAliases()}
+          </div>
-          {maybeRenderAge()}
+          <div className="performer-head col-6 col-sm-12">
+            <h2>
+              {performer.name}
+              {renderIcons()}
+            </h2>
+            {maybeRenderAliases()}
+            {maybeRenderAge()}
+          </div>
         </div>
         <div className="performer-body">
           <div className="performer-tabs">{renderTabs()}</div>

ui/v2.5/src/components/performers/PerformerList.tsx

@@ -55,7 +55,7 @@ export const PerformerList: React.FC = () => {
     }
     if (filter.displayMode === DisplayMode.Grid) {
       return (
-        <div className="grid">
+        <div className="grid row">
           {result.data.findPerformers.performers.map(p => (
             <PerformerCard key={p.id} performer={p} />
           ))}

ui/v2.5/src/components/scenes/SceneCard.tsx

@@ -188,7 +188,7 @@ export const SceneCard: React.FC<ISceneCardProps> = (
     >
       <Form.Control
         type="checkbox"
-        className="card-select"
+        className="card-select d-none d-sm-block"
         checked={props.selected}
         onChange={() => props.onSelectedChanged(!props.selected, shiftKey)}
         onClick={(event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {

ui/v2.5/src/components/scenes/SceneDetails/PrimaryTags.tsx

@@ -53,7 +53,7 @@ export const PrimaryTags: React.FC<IPrimaryTags> = ({ sceneMarkers, onClickMarke
     });
 
     return (
-      <Card className="primary-card col-3" key={id}>
+      <Card className="primary-card col-12 col-sm-3" key={id}>
         <h3>{primaries[id].name}</h3>
         <Card.Body className="primary-card-body">
           { markers }

ui/v2.5/src/components/scenes/SceneDetails/Scene.tsx

@@ -55,7 +55,7 @@ export const Scene: React.FC = () => {
         timestamp={timestamp}
         autoplay={autoplay}
       />
-      <div id="details-container">
+      <div id="details-container" className="col col-sm-9 m-sm-auto">
         <Tabs id="scene-tabs" mountOnEnter>
           <Tab eventKey="scene-details-panel" title="Details">
             <SceneDetailPanel scene={scene} />
@@ -83,7 +83,7 @@ export const Scene: React.FC = () => {
           <Tab className="file-info-panel" eventKey="scene-file-info-panel" title="File Info">
             <SceneFileInfoPanel scene={scene} />
           </Tab>
-          <Tab eventKey="scene-edit-panel" title="Edit">
+          <Tab eventKey="scene-edit-panel" title="Edit" tabClassName="d-none d-sm-block">
             <SceneEditPanel
               scene={scene}
               onUpdate={newScene => setScene(newScene)}

ui/v2.5/src/components/scenes/SceneDetails/SceneDetailPanel.tsx

@@ -34,9 +34,9 @@ export const SceneDetailPanel: React.FC<ISceneDetailProps> = props => {
 
   return (
     <div className="row">
-      <h1 className="col scene-header">
+      <h3 className="col scene-header text-truncate">
         {props.scene.title ?? TextUtils.fileNameFromPath(props.scene.path)}
-      </h1>
+      </h3>
       <div className="col-6 scene-details">
         <h4>{props.scene.date ?? ''}</h4>
         {props.scene.rating ? <h6>Rating: {props.scene.rating}</h6> : ""}

ui/v2.5/src/components/scenes/SceneDetails/SceneFileInfoPanel.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { Table } from "react-bootstrap";
 import * as GQL from "src/core/generated-graphql";
 import { TextUtils } from "src/utils";
 
@@ -12,10 +11,10 @@ export const SceneFileInfoPanel: React.FC<ISceneFileInfoPanelProps> = (
 ) => {
   function renderChecksum() {
     return (
-      <tr>
+      <div className="row">
-        <td>Checksum</td>
+        <span className="col-4">Checksum</span>
-        <td>{props.scene.checksum}</td>
+        <span className="col-8 text-truncate">{props.scene.checksum}</span>
-      </tr>
+      </div>
     );
   }
 
@@ -24,25 +23,25 @@ export const SceneFileInfoPanel: React.FC<ISceneFileInfoPanelProps> = (
       scene: { path }
     } = props;
     return (
-      <tr>
+      <div className="row">
-        <td>Path</td>
+        <span className="col-4">Path</span>
-        <td>
+        <span className="col-8 text-truncate">
           <a href={`file://${path}`}>{`file://${props.scene.path}`}</a>{" "}
-        </td>
+        </span>
-      </tr>
+      </div>
     );
   }
 
   function renderStream() {
     return (
-      <tr>
+      <div className="row">
-        <td>Stream</td>
+        <span className="col-4">Stream</span>
-        <td>
+        <span className="col-8 text-truncate">
           <a href={props.scene.paths.stream ?? ""}>
             {props.scene.paths.stream}
           </a>{" "}
-        </td>
+        </span>
-      </tr>
+      </div>
     );
   }
 
@@ -51,12 +50,12 @@ export const SceneFileInfoPanel: React.FC<ISceneFileInfoPanelProps> = (
       return;
     }
     return (
-      <tr>
+      <div className="row">
-        <td>File Size</td>
+        <span className="col-4">File Size</span>
-        <td>
+        <span className="col-8 text-truncate">
           {TextUtils.fileSize(parseInt(props.scene.file.size ?? "0", 10))}
-        </td>
+        </span>
-      </tr>
+      </div>
     );
   }
 
@@ -65,10 +64,12 @@ export const SceneFileInfoPanel: React.FC<ISceneFileInfoPanelProps> = (
       return;
     }
     return (
-      <tr>
+      <div className="row">
-        <td>Duration</td>
+        <span className="col-4">Duration</span>
-        <td>{TextUtils.secondsToTimestamp(props.scene.file.duration ?? 0)}</td>
+        <span className="col-8 text-truncate">
-      </tr>
+          {TextUtils.secondsToTimestamp(props.scene.file.duration ?? 0)}
+        </span>
+      </div>
     );
   }
 
@@ -77,12 +78,12 @@ export const SceneFileInfoPanel: React.FC<ISceneFileInfoPanelProps> = (
       return;
     }
     return (
-      <tr>
+      <div className="row">
-        <td>Dimensions</td>
+        <span className="col-4">Dimensions</span>
-        <td>
+        <span className="col-8 text-truncate">
           {props.scene.file.width} x {props.scene.file.height}
-        </td>
+        </span>
-      </tr>
+      </div>
     );
   }
 
@@ -91,22 +92,22 @@ export const SceneFileInfoPanel: React.FC<ISceneFileInfoPanelProps> = (
       return;
     }
     return (
-      <tr>
+      <div className="row">
-        <td>Frame Rate</td>
+        <span className="col-4">Frame Rate</span>
-        <td>{props.scene.file.framerate} frames per second</td>
+        <span className="col-8 text-truncate">{props.scene.file.framerate} frames per second</span>
-      </tr>
+      </div>
     );
   }
 
-  function renderBitRate() {
+  function renderbitrate() {
     if (props.scene.file.bitrate === undefined) {
       return;
     }
     return (
-      <tr>
+      <div className="row">
-        <td>Bit Rate</td>
+        <span className="col-4">Bit Rate</span>
-        <td>{TextUtils.bitRate(props.scene.file.bitrate ?? 0)}</td>
+        <span className="col-8 text-truncate">{TextUtils.bitRate(props.scene.file.bitrate ?? 0)}</span>
-      </tr>
+      </div>
     );
   }
 
@@ -115,10 +116,10 @@ export const SceneFileInfoPanel: React.FC<ISceneFileInfoPanelProps> = (
       return;
     }
     return (
-      <tr>
+      <div className="row">
-        <td>Video Codec</td>
+        <span className="col-4">Video Codec</span>
-        <td>{props.scene.file.video_codec}</td>
+        <span className="col-8 text-truncate">{props.scene.file.video_codec}</span>
-      </tr>
+      </div>
     );
   }
 
@@ -127,10 +128,10 @@ export const SceneFileInfoPanel: React.FC<ISceneFileInfoPanelProps> = (
       return;
     }
     return (
-      <tr>
+      <div className="row">
-        <td>Audio Codec</td>
+        <span className="col-4">Audio Codec</span>
-        <td>{props.scene.file.audio_codec}</td>
+        <span className="col-8 text-truncate">{props.scene.file.audio_codec}</span>
-      </tr>
+      </div>
     );
   }
 
@@ -139,30 +140,26 @@ export const SceneFileInfoPanel: React.FC<ISceneFileInfoPanelProps> = (
       return;
     }
     return (
-      <tr>
+      <div className="row">
-        <td>Downloaded From</td>
+        <span className="col-4">Downloaded From</span>
-        <td>{props.scene.url}</td>
+        <span className="col-8 text-truncate">{props.scene.url}</span>
-      </tr>
+      </div>
     );
   }
 
   return (
-    <>
+    <div className="container scene-file-info">
-      <Table>
+      {renderChecksum()}
-        <tbody>
+      {renderPath()}
-          {renderChecksum()}
+      {renderStream()}
-          {renderPath()}
+      {renderFileSize()}
-          {renderStream()}
+      {renderDuration()}
-          {renderFileSize()}
+      {renderDimensions()}
-          {renderDuration()}
+      {renderFrameRate()}
-          {renderDimensions()}
+      {renderbitrate()}
-          {renderFrameRate()}
+      {renderVideoCodec()}
-          {renderBitRate()}
+      {renderAudioCodec()}
-          {renderVideoCodec()}
+      {renderUrl()}
-          {renderAudioCodec()}
+    </div>
-          {renderUrl()}
-        </tbody>
-      </Table>
-    </>
   );
 };

ui/v2.5/src/components/scenes/SceneDetails/SceneMarkersPanel.tsx

@@ -51,11 +51,13 @@ export const SceneMarkersPanel: React.FC<ISceneMarkersPanelProps> = (
   return (
     <>
       <Button onClick={() => onOpenEditor()}>Create Marker</Button>
-      <PrimaryTags
+        <div className="container">
-        sceneMarkers={props.scene.scene_markers ?? []}
+          <PrimaryTags
-        onClickMarker={onClickMarker}
+            sceneMarkers={props.scene.scene_markers ?? []}
-        onEdit={onOpenEditor}
+            onClickMarker={onClickMarker}
-      />
+            onEdit={onOpenEditor}
+          />
+        </div>
       <div className="row">
         <WallPanel
           sceneMarkers={props.scene.scene_markers}

ui/v2.5/src/components/scenes/ScenePlayer/ScenePlayer.tsx

@@ -194,7 +194,7 @@ export class ScenePlayerImpl extends React.Component<
     return (
       <ReactJWPlayer
         playerId={JWUtils.playerID}
-        playerScript="http://localhost:9999/jwplayer/jwplayer.js"
+        playerScript="http://192.168.1.65:9999/jwplayer/jwplayer.js"
         customProps={config}
         onReady={this.onReady}
         onSeeked={this.onSeeked}
@@ -205,8 +205,8 @@ export class ScenePlayerImpl extends React.Component<
 
   public render() {
     return (
-      <HotKeys keyMap={KeyMap} handlers={this.KeyHandlers}>
+      <HotKeys keyMap={KeyMap} handlers={this.KeyHandlers} className="row">
-        <div id="jwplayer-container">
+        <div id="jwplayer-container" className="w-100 col-sm-9 m-sm-auto no-gutter" >
           {this.renderPlayer()}
           <ScenePlayerScrubber
             scene={this.props.scene}

ui/v2.5/src/components/scenes/ScenePlayer/ScenePlayerScrubber.tsx

@@ -357,7 +357,7 @@ export const ScenePlayerScrubber: React.FC<IScenePlayerScrubberProps> = (
   }
 
   return (
-    <div className="scrubber-wrapper">
+    <div className="scrubber-wrapper d-none d-sm-block">
       <Button
         variant="link"
         className="scrubber-button"

ui/v2.5/src/components/scenes/styles.scss

@@ -78,8 +78,8 @@
 }
 
 .file-info-panel {
-  td {
+  div {
-    padding: .4rem;
+    margin-bottom: .5rem;
   }
 }
 

ui/v2.5/src/index.scss

@@ -8,6 +8,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
   margin: 0;
   padding: $pt-navbar-height 0 0 0;
+
+  @media (min-width: 600px) {
+    min-width: 845px;
+  }
 }
 
 code {
@@ -21,6 +25,12 @@ code {
   margin: $pt-grid-size $pt-grid-size 0 0;
   padding: 0;
 
+  .performer-card,
+  .studio-card {
+    min-width: 185px;
+    width: 320px;
+  }
+
   &.wall {
     margin: 0;
     padding: 0;
@@ -44,53 +54,54 @@ code {
   .card {
     margin: 0 0 10px 10px;
     overflow: hidden;
-    width: 20rem;
 
-    &.zoom-0 {
+    @media (min-width: 576px) {
-      width: 15rem;
+      &.zoom-0 {
+        width: 15rem;
 
-      .previewable {
+        .previewable {
-        max-height: 11.25rem;
+          max-height: 11.25rem;
+        }
+
+        .previewable.portrait {
+          max-height: 11.25rem;
+        }
       }
 
-      .previewable.portrait {
+      &.zoom-1 {
-        max-height: 11.25rem;
+        width: 20rem;
-      }
-    }
 
-    &.zoom-1 {
+        .previewable {
-      width: 20rem;
+          max-height: 15rem;
+        }
 
-      .previewable {
+        .previewable.portrait {
-        max-height: 15rem;
+          height: 15rem;
+        }
       }
 
-      .previewable.portrait {
+      &.zoom-2 {
-        height: 15rem;
+        width: 30rem;
-      }
-    }
 
-    &.zoom-2 {
+        .previewable {
-      width: 30rem;
+          max-height: 22.5rem;
+        }
 
-      .previewable {
+        .previewable.portrait {
-        max-height: 22.5rem;
+          height: 22.5rem;
+        }
       }
 
-      .previewable.portrait {
+      &.zoom-3 {
-        height: 22.5rem;
+        width: 40rem;
-      }
-    }
 
-    &.zoom-3 {
+        .previewable {
-      width: 40rem;
+          max-height: 30rem;
+        }
 
-      .previewable {
+        .previewable.portrait {
-        max-height: 30rem;
+          height: 30rem;
-      }
+        }
-
-      .previewable.portrait {
-        height: 30rem;
       }
     }
 
@@ -314,11 +325,6 @@ video.preview.portrait {
   width: 100%;
 }
 
-#details-container {
-  margin: 10px auto;
-  width: 75%;
-}
-
 .pre {
   white-space: pre-line;
 }
@@ -527,3 +533,35 @@ video.preview.portrait {
   }
 }
 /* stylelint-enable */
+
+.brand-icon {
+  padding: 3px 6px;
+
+  img {
+    height: 1.5rem;
+  }
+}
+
+.top-nav {
+  @media (max-width: 576px) {
+    a {
+      padding: 6px;
+    }
+  }
+}
+
+@media (max-width: 576px) {
+  .nav-tabs {
+    border: none;
+    margin: auto;
+
+    .nav-link {
+      border: none;
+      padding: 8px;
+
+      &.active {
+        border-bottom: 2px solid;
+      }
+    }
+  }
+}