[hackathon] Mobile-friendly Texera: iOS app + responsive Angular UI

.licenserc.yaml

@@ -35,6 +35,9 @@ header:
     - '**/.env.example'
     - '**/.prettierrc'
     - '**/bun.lock'
+    # XcodeGen-generated Xcode project files. Source of truth is
+    # `ios/project.yml`; regenerating overwrites these.
+    - 'ios/Texera.xcodeproj/**'
     # Third-party code with MIT license - see LICENSE file for attribution
     - 'common/workflow-operator/src/main/scala/com/kjetland/**'
     # TypeFox monaco-languageclient derived files (MIT License)

frontend/src/app/dashboard/component/dashboard.component.scss

@@ -119,3 +119,18 @@ nz-content {
   max-height: 100%;
   overflow: hidden;
 }
+
+// On phones, strip the web-app chrome so the content has the whole
+// viewport. Hides the top nav (search + sign-in) and the left sider
+// (Hub / About menu), and drops the inner-layout border that would
+// otherwise leave a 1px sliver where the sider used to sit.
+@media (max-width: 767px) {
+  #nav,
+  nz-sider {
+    display: none;
+  }
+
+  .page-content-layout {
+    border-left: none;
+  }
+}

frontend/src/app/dashboard/component/user/list-item/list-item.component.scss

@@ -198,3 +198,33 @@
 :host ::ng-deep nz-card.list-item-card.ant-card:hover .ant-card-body {
   cursor: pointer;
 }
+
+// On phones, drop every per-row metadata column (owner avatar, views, size,
+// created date, edited date, like button) so the row is just the resource
+// name + description. Tap-to-open is the only mobile interaction here.
+//
+// Also force-hide the hover-revealed action button-group at the bottom of
+// each row — on touch devices tapping the row triggers :hover and the
+// buttons flash in, which is jarring on mobile.
+@media (max-width: 767px) {
+  .resource-info {
+    display: none;
+  }
+
+  .button-group,
+  .list-item-card:hover .button-group {
+    display: none;
+  }
+
+  // Edit Description / Rename are hover-only desktop affordances. On touch
+  // they fire from tap-induced :hover, so override the hover rule and
+  // disable the description text's click-to-edit (the row's routerLink
+  // takes over instead, so a tap opens the workflow).
+  .list-item-card:hover .edit-button {
+    display: none;
+  }
+
+  .resource-description {
+    pointer-events: none;
+  }
+}

frontend/src/app/dashboard/component/user/user-workflow/user-workflow-list-item/user-workflow-list-item.component.scss

@@ -66,3 +66,64 @@
     }
   }
 }
+
+// ---------------------------------------------------------------------------
+// Mobile (<768px): strip the row down to "workflow name + last-modified time".
+// Avatar, inline edit buttons, description, created date, project labels and
+// action icons are desktop-only — they don't fit on a phone and the items
+// stop being tappable when they're crammed in. Management actions are
+// reachable from the workflow detail view.
+// ---------------------------------------------------------------------------
+@media (max-width: 767px) {
+  .workflow-list-item {
+    padding: 8px 0;
+    min-height: 56px;
+    margin-bottom: 4px;
+  }
+
+  .workflow-item-meta-title {
+    // Drop the inline edit / add-description icons next to the name.
+    button {
+      display: none;
+    }
+  }
+
+  .workflow-name {
+    font-size: 16px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  // Hide the description row entirely (often empty, eats vertical space).
+  .workflow-item-meta-description {
+    display: none;
+  }
+
+  // Keep "Last Modified" only; the "Created" timestamp is rarely useful.
+  ::ng-deep .metadata-container {
+    font-size: 12px;
+    line-height: 1.3;
+
+    span:nth-child(2) {
+      display: none;
+    }
+  }
+
+  // Avatar (gray circle with workflow id) is pure noise on a phone.
+  ::ng-deep .ant-list-item-meta-avatar {
+    display: none;
+  }
+
+  // Hide project label chips on phones; tap into the workflow to see them.
+  .project-label-container {
+    display: none;
+  }
+
+  // Strip every per-row action button (share / duplicate / download / delete /
+  // executions). Mobile is a read+open surface; manage workflows on desktop.
+  ::ng-deep .ant-list-item-action {
+    display: none;
+  }
+}

frontend/src/app/dashboard/component/user/user-workflow/user-workflow.component.scss

@@ -25,3 +25,45 @@
   right: 8px;
   top: 5px;
 }
+
+// ---------------------------------------------------------------------------
+// Mobile (<768px): the header row is too dense for a phone. Slim down the
+// title, collapse the "Create Workflow" button to its icon, let the utility
+// button group wrap, and replace the fixed-height grid with intrinsic sizing
+// so a wrapping toolbar doesn't clip into the list below.
+// ---------------------------------------------------------------------------
+@media (max-width: 767px) {
+  .section-container {
+    grid-template-rows: auto auto 1fr;
+  }
+
+  .section-title {
+    .page-title {
+      font-size: 26px;
+      font-weight: 700;
+      margin: 0 0 8px;
+    }
+
+    // The whole header button row (Create + utility group + filters) is
+    // desktop-only on phones.
+    .button-group {
+      display: none;
+    }
+
+    // "Create Workflow" — keep the icon, drop the label.
+    .create-btn span:not([nz-icon]) {
+      display: none;
+    }
+
+    // Sort / upload / batch-select / download-zip / duplicate-many / delete-many
+    // / add-to-project / remove-from-project — all desktop-only.
+    .utility-button-group {
+      display: none;
+    }
+  }
+
+  .section-search-bar {
+    padding: 4px 12px;
+    margin-left: 0;
+  }
+}

frontend/src/app/hub/component/about/about.component.html

@@ -26,45 +26,65 @@
     nz-col
     nzFlex="auto"
     class="content">
-    <h1 class="about-title">About Texera</h1>
+    <!-- Mobile-only hero: peacock logo + tagline. Hidden on tablet+ -->
+    <div class="mobile-hero">
+      <img
+        class="hero-logo"
+        src="../../../../../assets/logos/logo.png"
+        alt="Texera" />
+      <p class="hero-tagline">Human–AI data science with visual workflows</p>
+    </div>
+
+    <!-- Login card. Always shown (even when logged in) so users on mobile
+         can sign in as a different account without finding a logout. -->
+    <texera-local-login
+      *ngIf="this.config.env.localLogin"
+      class="login-container">
+    </texera-local-login>
 
-    <p>
-      Apache Texera (Incubating) is an open-source platform for human-AI collaborative data science using visual
-      workflows. It enables analysts to construct, execute, and refine data analysis tasks through an intuitive GUI,
-      assisted by AI agents that understand natural-language instructions. Texera is well-suited for a wide range of
-      applications, including “AI for Science,” by making advanced AI and data science capabilities accessible to a
-      broader community. It can run on a laptop for local use or be deployed in the cloud to support scalable processing
-      of large datasets.
-    </p>
+    <!-- About prose: visible on tablet+ only -->
+    <div class="about-prose">
+      <h1 class="about-title">About Texera</h1>
 
-    <h2 class="content-title">The platform has the following key features:</h2>
-    <ul class="text-content">
-      <li>Natural-language data science through AI agents</li>
-      <li>Intuitive GUI-based workflows for data science</li>
-      <li>Real-time collaboration for workflow editing and execution</li>
-      <li>Parallel backend engine for scalable big-data processing</li>
-      <li>Language-agnostic workflow runtime, native support for Python and Java</li>
-      <li>Separation of compute and storage for flexible cloud deployment</li>
-      <li>Runtime debugging and interactive workflow execution</li>
-    </ul>
-    <img
-      class="workflow-gui-screenshot"
-      src="../../../../../assets/workflow_gui.png"
-      alt="workflow gui screenshot" />
-    <h2 class="learn-more-title">Learn More</h2>
-    <div class="learn-more-section">
       <p>
-        To learn more, please visit <a href="https://texera.apache.org/">https://texera.apache.org/</a>. The
-        <a href="https://github.com/apache/texera">source code</a> of the platform is available on GitHub.
+        Apache Texera (Incubating) is an open-source platform for human-AI collaborative data science using visual
+        workflows. It enables analysts to construct, execute, and refine data analysis tasks through an intuitive GUI,
+        assisted by AI agents that understand natural-language instructions. Texera is well-suited for a wide range of
+        applications, including “AI for Science,” by making advanced AI and data science capabilities accessible to a
+        broader community. It can run on a laptop for local use or be deployed in the cloud to support scalable
+        processing of large datasets.
       </p>
+
+      <h2 class="content-title">The platform has the following key features:</h2>
+      <ul class="text-content">
+        <li>Natural-language data science through AI agents</li>
+        <li>Intuitive GUI-based workflows for data science</li>
+        <li>Real-time collaboration for workflow editing and execution</li>
+        <li>Parallel backend engine for scalable big-data processing</li>
+        <li>Language-agnostic workflow runtime, native support for Python and Java</li>
+        <li>Separation of compute and storage for flexible cloud deployment</li>
+        <li>Runtime debugging and interactive workflow execution</li>
+      </ul>
+      <img
+        class="workflow-gui-screenshot"
+        src="../../../../../assets/workflow_gui.png"
+        alt="workflow gui screenshot" />
+      <h2 class="learn-more-title">Learn More</h2>
+      <div class="learn-more-section">
+        <p>
+          To learn more, please visit <a href="https://texera.apache.org/">https://texera.apache.org/</a>. The
+          <a href="https://github.com/apache/texera">source code</a> of the platform is available on GitHub.
+        </p>
+      </div>
     </div>
-    <ng-container *ngIf="(isLogin$ | async) === false as isLogin">
-      <texera-local-login
-        *ngIf="this.config.env.localLogin"
-        class="login-container"
-        nz-col
-        nzFlex="300px">
-      </texera-local-login>
-    </ng-container>
+
+    <!-- Mobile-only condensed "learn more" link, in place of the full prose -->
+    <a
+      class="mobile-learn-more"
+      href="https://texera.apache.org/"
+      target="_blank"
+      rel="noopener">
+      Learn more about Texera →
+    </a>
   </div>
 </div>