frontend/project panels: fix styling, such that on narrower viewports you can scroll to see everything

Author: haraldschilly

src/packages/frontend/account/licenses/projects-with-licenses.tsx

@@ -3,16 +3,17 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Alert, Row, Col } from "antd";
+import { Alert, Col, Row } from "antd";
 import { useEffect, useMemo, useState } from "react";
-import { useTypedRedux, redux } from "../../app-framework";
-import { Loading, TimeAgo } from "../../components";
-import { projects_with_licenses } from "./util";
-import { plural, trunc_middle } from "@cocalc/util/misc";
-import { LICENSES_STYLE } from "./managed-licenses";
 import { Virtuoso } from "react-virtuoso";
-import { SelectProject } from "@cocalc/frontend/projects/select-project";
+
+import { redux, useTypedRedux } from "@cocalc/frontend/app-framework";
+import { Loading, TimeAgo } from "@cocalc/frontend/components";
 import { SiteLicense } from "@cocalc/frontend/project/settings/site-license";
+import { SelectProject } from "@cocalc/frontend/projects/select-project";
+import { plural, trunc_middle } from "@cocalc/util/misc";
+import { LICENSES_STYLE } from "./managed-licenses";
+import { projects_with_licenses } from "./util";
 
 export function ProjectsWithLicenses({}) {
   const [project_id, setProjectId] = useState<string | undefined>(undefined);

src/packages/frontend/project/info/full.tsx

@@ -31,6 +31,7 @@ import {
 } from "./components";
 import { CGroupInfo, DUState, PTStats, ProcessRow } from "./types";
 import { DETAILS_BTN_TEXT, SSH_KEYS_DOC } from "./utils";
+import { ROOT_STYLE } from "../servers/consts";
 
 interface Props {
   any_alerts: () => boolean;
@@ -518,12 +519,10 @@ export function Full(props: Readonly<Props>): JSX.Element {
   }
 
   return (
-    <Row style={{ padding: "15px 15px 0 15px" }}>
-      <Col md={12}>
-        {render_not_running()}
-        {render_error()}
-        {render_body()}
-      </Col>
-    </Row>
+    <div style={ROOT_STYLE}>
+      {render_not_running()}
+      {render_error()}
+      {render_body()}
+    </div>
   );
 }

src/packages/frontend/project/new/project-new.tsx

@@ -4,9 +4,9 @@
  */
 
 import { Col, Row } from "@cocalc/frontend/antd-bootstrap";
-import { CSS } from "@cocalc/frontend/app-framework";
 import { useProjectContext } from "@cocalc/frontend/project/context";
 import NewFilePage from "./new-file-page";
+import { ROOT_STYLE } from "../servers/consts";
 
 interface Props {
   project_id: string;
@@ -17,10 +17,9 @@ export function ProjectNew({ project_id }: Props): JSX.Element {
 
   const isWide = mainWidthPx > 800;
   const offset = isWide ? 1 : 0;
-  const style: CSS = isWide ? {} : { marginLeft: "10px", marginRight: "10px" };
 
   return (
-    <Row style={style}>
+    <Row style={{ ...ROOT_STYLE }}>
       <Col md={12} mdOffset={0} lg={12 - 2 * offset} lgOffset={offset}>
         <NewFilePage project_id={project_id} />
       </Col>

src/packages/frontend/project/page/content.tsx

@@ -59,7 +59,7 @@ import getUrlTransform from "./url-transform";
 const DEFAULT_CHAT_WIDTH = IS_MOBILE ? 0.5 : 0.3;
 
 const MAIN_STYLE: React.CSSProperties = {
-  overflowX: "hidden",
+  overflowX: "auto",
   flex: "1 1 auto",
   height: 0,
   position: "relative",

src/packages/frontend/project/page/project-collaborators.tsx

@@ -73,14 +73,7 @@ export function ProjectCollaboratorsPage(): JSX.Element {
   }
 
   return (
-    <div
-      style={{
-        ...ROOT_STYLE,
-        width: "1000px",
-        maxWidth: "100%",
-        margin: "auto",
-      }}
-    >
+    <div style={ROOT_STYLE}>
       <Title level={2}>
         <Icon name={ICON_USERS} /> {intl.formatMessage(labels.users)}
       </Title>

src/packages/frontend/project/page/project-licenses.tsx

@@ -87,7 +87,7 @@ export function ProjectLicenses({ project_id }): JSX.Element {
   }
 
   return (
-    <div style={{ ...ROOT_STYLE, maxWidth: undefined }}>
+    <div style={ROOT_STYLE}>
       <Title level={2}>
         <Icon name={ICON_UPGRADES} />{" "}
         <FormattedMessage

src/packages/frontend/project/servers/consts.ts

@@ -16,6 +16,5 @@ export const ROOT_STYLE: CSS = {
   paddingLeft: "20px",
   paddingRight: "20px",
   maxWidth: "100%",
-  width: "1100px",
-  margin: "auto",
+  margin: "0 auto",
 } as const;

src/packages/frontend/project/servers/project-servers.tsx

@@ -5,31 +5,32 @@
 
 import { Col, Divider, Modal, Row, Tabs, TabsProps } from "antd";
 import { Gutter } from "antd/es/grid/row";
-import { useProjectContext } from "@cocalc/frontend/project/context";
+import { FormattedMessage } from "react-intl";
+
 import { useState } from "@cocalc/frontend/app-framework";
 import { A, Icon, Paragraph, Text, Title } from "@cocalc/frontend/components";
 import {
+  cloudFilesystemsEnabled,
   ComputeServerDocs,
   ComputeServers,
   computeServersEnabled,
-  cloudFilesystemsEnabled,
 } from "@cocalc/frontend/compute";
+import CloudFilesystems from "@cocalc/frontend/compute/cloud-filesystem/cloud-filesystems";
+import {
+  getServerTab,
+  setServerTab,
+  TabName,
+} from "@cocalc/frontend/compute/tab";
+import { useStudentProjectFunctionality } from "@cocalc/frontend/course";
 import { HelpEmailLink } from "@cocalc/frontend/customize";
+import { useProjectContext } from "@cocalc/frontend/project/context";
 import { R_IDE } from "@cocalc/util/consts/ui";
 import { NamedServerName } from "@cocalc/util/types/servers";
 import { NamedServerPanel } from "../named-server-panel";
 import { NewFileButton } from "../new/new-file-button";
 import { SagewsControl } from "../settings/sagews-control";
 import { useAvailableFeatures } from "../use-available-features";
 import { ICON_NAME, ROOT_STYLE, TITLE } from "./consts";
-import CloudFilesystems from "@cocalc/frontend/compute/cloud-filesystem/cloud-filesystems";
-import {
-  getServerTab,
-  setServerTab,
-  TabName,
-} from "@cocalc/frontend/compute/tab";
-import { FormattedMessage } from "react-intl";
-import { useStudentProjectFunctionality } from "@cocalc/frontend/course";
 
 // Antd's 24 grid system
 const md = 6;
@@ -243,7 +244,7 @@ export function ProjectServers() {
   }
 
   return (
-    <div style={{ ...ROOT_STYLE, margin: "0 auto" }}>
+    <div style={ROOT_STYLE}>
       <Title level={2}>
         <Icon name={ICON_NAME} /> {TITLE}
       </Title>

src/packages/frontend/project/settings/site-license.tsx

@@ -8,6 +8,7 @@
 
 import { Button, Card, Popover } from "antd";
 import { FormattedMessage, useIntl } from "react-intl";
+
 import { alert_message } from "@cocalc/frontend/alerts";
 import {
   redux,
@@ -18,6 +19,7 @@ import {
 } from "@cocalc/frontend/app-framework";
 import { Icon, Paragraph, Text, Title } from "@cocalc/frontend/components";
 import { labels } from "@cocalc/frontend/i18n";
+import { ProjectTitle } from "@cocalc/frontend/projects/project-title";
 import { SiteLicenseInput } from "@cocalc/frontend/site-licenses/input";
 import { BuyLicenseForProject } from "@cocalc/frontend/site-licenses/purchase/buy-license-for-project";
 import { LICENSE_INFORMATION } from "@cocalc/frontend/site-licenses/rules";
@@ -31,7 +33,6 @@ import {
 } from "@cocalc/util/upgrades/quota";
 import { isBoostLicense } from "@cocalc/util/upgrades/utils";
 import { SiteLicense as SiteLicenseT } from "./types";
-import { ProjectTitle } from "@cocalc/frontend/projects/project-title";
 
 interface Props {
   project_id: string;
@@ -232,8 +233,10 @@ export function SiteLicense({
       <>
         {isFlyout && haveLicenses ? (
           <Paragraph type="secondary" style={{ padding: "5px" }}>
-            Information about attached licenses. Click on a row to expand
-            details.
+            <FormattedMessage
+              id="project.settings.site-license.body.info"
+              defaultMessage={`Information about attached licenses. Click on a row to expand details.`}
+            />
           </Paragraph>
         ) : undefined}
         {render_current_licenses()}

src/packages/frontend/project/settings/upgrade-usage.tsx

@@ -6,7 +6,7 @@
 import { Button, Card, Typography } from "antd";
 import { List } from "immutable";
 import { join } from "path";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import {
   CSS,
@@ -73,6 +73,7 @@ export const UpgradeUsage: React.FC<Props> = React.memo(
     dedicated_resources,
     mode,
   }: Readonly<Props>) => {
+    const intl = useIntl();
     const actions: ProjectsActions = useActions("projects");
     const project_actions = useActions({ project_id });
     const account_groups: List<string> =
@@ -383,6 +384,7 @@ export const UpgradeUsage: React.FC<Props> = React.memo(
     if (project == null) {
       return <Loading theme="medium" transparent />;
     }
+
     return (
       <div style={{ maxWidth: "1000px" }}>
         <Title level={4}>
@@ -395,12 +397,12 @@ export const UpgradeUsage: React.FC<Props> = React.memo(
           type="secondary"
           ellipsis={{ rows: 1, expandable: true, symbol: "more" }}
         >
-          <FormattedMessage
-            id="project.settings.upgrade-usage.intro"
-            defaultMessage={`This table lists project quotas, their current usage,
-              and their value/limit. Click on a row to show more details about it.
-              If the project is not running, you see the last known quota values.`}
-          />
+          {intl.formatMessage({
+            id: "project.settings.upgrade-usage.intro",
+            defaultMessage: `This table lists project quotas, their current usage, and their value/limit.
+            Click on a row to show more details about it.
+            If the project is not running, you see the last known quota values.`,
+          })}
         </Paragraph>
         {render_run_quota()}
         {render_upgrades_button()}