Krow/krow_talent_app
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix mobile screen issues

Browse Source
This commit is contained in:
Aravind
2026-08-24 13:14:22 +05:30
parent dcf9770ada
commit 02eb48af99
34 changed files with 1214 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
src/components/ai-assistant/AssistantPanel.jsx
View File

@@ -4,6 +4,7 @@ import { cn } from '@/lib/utils';
import KrowAssistant from './KrowAssistant';
import { useAssistantPanel } from './AssistantPanelContext';
import { ResizeDivider } from './ResizeDivider';
import { useIsPhone, useViewportWidth, useVisualViewport } from './viewport';
import OwliverAvatar from '@/components/krow/OwliverAvatar';
const EXPANDED_WIDTH = 620;
@@ -18,32 +19,6 @@ const LEAD_PADDING = 8;
const GUTTER = HANDLE_WIDTH + LEAD_PADDING;
/** Expanded must never dominate: the dashboard stays the primary experience. */
const MAX_VIEWPORT_SHARE = 0.42;
/**
* Below this width there is no room for a column *beside* the dashboard — a
* 380px track on a 375px phone collapses `main` to nothing — so Owliver stacks
* underneath the page instead.
*
* Deliberately Tailwind's `md` (768px), not `lg`: tablets already lay the inline
* column out acceptably, so they keep the two-column workspace and only phones
* stack.
*/
const STACK_BREAKPOINT = 768;
/** Tracks viewport width so the panel can be clamped and the layout switched. */
function useViewportWidth() {
const [width, setWidth] = React.useState(() =>
typeof window === 'undefined' ? 1440 : window.innerWidth
);
React.useEffect(() => {
const onResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, []);
return width;
}
/**
* The collapsed state — a compact docked trigger.
*
@@ -64,7 +39,12 @@ function CollapsedTrigger({ page, onRestore }) {
onClick={onRestore}
aria-label={`Show the Owliver workspace for ${page}`}
aria-expanded={false}
className="group fixed bottom-5 right-5 z-30 inline-flex items-center gap-2 rounded-full border border-border
/* `bottom` is a `max()` against the bottom safe-area inset rather than a
flat 20px: on a phone with a home indicator a flat offset puts the pill
under the gesture bar, where the tap belongs to the OS. `env()` is 0
everywhere else, so desktop keeps the offset it always had. */
className="group fixed bottom-[max(1.25rem,env(safe-area-inset-bottom))] right-[max(1.25rem,env(safe-area-inset-right))]
z-30 inline-flex items-center gap-2 rounded-full border border-border
bg-surface py-2 pl-2 pr-3.5 shadow-md transition-[box-shadow,border-color] duration-base
hover:border-krow-blue/40 hover:shadow-lg
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-krow-blue/50"
@@ -77,11 +57,105 @@ function CollapsedTrigger({ page, onRestore }) {
}
/**
* AssistantPanel — the Owliver workspace column the Admin layout renders.
* MobileWorkspace — Owliver on a phone.
*
* Owliver is part of the page on every supported route, so this is a column in
* the layout rather than an overlay: the dashboard reflows beside it instead of
* being covered, and collapsing restores the original layout exactly.
* The same `KrowAssistant`, the same context, the same runtime, the same
* conversation. What changes is only where it is mounted: on a phone the
* workspace is an overlay above the page rather than a column beside it.
*
* That is forced by arithmetic, not taste. The desktop workspace is
* `main + 400px`; at 375px the 400px track leaves `main` negative, so the two
* surfaces stop being a layout and start being a fight over the same pixels —
* which is exactly what the broken state was. An overlay takes the page out of
* that arithmetic entirely: the page stays `width: 100%` whether Owliver is
* open or closed, and there is never a reserved column standing empty.
*
* Three things this is deliberately not:
*
* - Not a second chat. Nothing about the assistant is re-implemented; this
* component is a positioned container and nothing else.
* - Not a takeover. It stops below the app header, so the reader can still see
* where they are and can still leave.
* - Not a fixed height. It is sized to `visualViewport` where that exists and
* to `100dvh` where it does not, so an open keyboard shortens the sheet
* instead of pushing the composer off the bottom of it.
*/
function MobileWorkspace({ context, onClose }) {
const viewport = useVisualViewport();
/* The page behind an overlay must not scroll: on a touch screen a drag that
starts on the scrim and lands on the page is otherwise indistinguishable
from scrolling the conversation, and the reader loses their place on both
surfaces at once. Restored exactly as found — another overlay may already
own it. */
React.useEffect(() => {
const { body } = document;
const previous = body.style.overflow;
body.style.overflow = 'hidden';
return () => { body.style.overflow = previous; };
}, []);
return (
<div
className="fixed inset-x-0 top-0 z-50 h-[100dvh] md:hidden"
style={viewport ? { height: viewport.height, top: viewport.offsetTop } : undefined}
>
{/* Tapping the page dismisses, which is what a sheet over a page should
do. A button rather than a bare div so it is reachable without a
pointer. */}
<button
type="button"
aria-label="Close the Owliver workspace"
onClick={onClose}
className="absolute inset-0 bg-ink-1/30 backdrop-blur-[2px] motion-safe:animate-fade-in"
/>
{/* `top-14` is the header's own height: the sheet starts under the app
bar rather than over it, so navigation is never covered. `min-h-0` is
what lets the assistant's internal scroller own the overflow instead
of the sheet growing past the viewport. */}
<div
className="absolute inset-x-0 bottom-0 top-14 flex min-h-0 flex-col px-3
pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3"
role="dialog"
aria-modal="true"
aria-label="Owliver workspace"
>
<KrowAssistant
key={context.id}
context={context}
/* Expanded is a desktop-only width state; there is no wider to go
here, so the control is not offered rather than offered and inert. */
expanded={false}
onClose={onClose}
onExpand={null}
onRestore={null}
className="h-full min-h-0"
/>
</div>
</div>
);
}
/**
* AssistantPanel — the Owliver workspace the Admin layout renders.
*
* One panel, two presentations, chosen by how much room there is beside the
* page rather than by what kind of device is asking:
*
* ≥ 768px a column in the layout. Owliver is part of the page on every
* supported route, so the dashboard reflows beside it instead of
* being covered, and collapsing restores the original layout
* exactly. This is the protected desktop geometry and everything
* below describes it.
* < 768px an overlay (`MobileWorkspace`), because a 400px track does not fit
* beside anything on a 375px phone. The page is `width: 100%` in
* both states and never participates in a two-column width
* calculation it cannot satisfy.
*
* Both presentations mount the same `KrowAssistant` with the same context and
* read the same open/collapsed state, so there is one assistant in the product
* and one set of actions that change it.
*
* Five structural details matter, and every one of them was a bug at some point:
*
@@ -111,10 +185,24 @@ export function AssistantPanel({ stickyClassName, panelHeightClassName }) {
setWidth, resetWidth, open, close, expand, restore,
} = useAssistantPanel();
const viewportWidth = useViewportWidth();
const isPhone = useIsPhone();
// No assistant on this route: no column, no rail, no trace in the layout.
if (!context) return null;
/* Phones: Owliver is never a column, in either state.
Closed, the layout is one column and `main` has the whole viewport — there
is no reserved 400px gutter to leave a blank strip down the right. Open,
the workspace is an overlay, so the page keeps that full width underneath
rather than being asked to share it with a track wider than the phone.
Both states are rendered from the same panel state the desktop column uses,
so opening, collapsing and reopening are the same three actions here. */
if (isPhone) {
return isOpen
? <MobileWorkspace context={context} onClose={close} />
: <CollapsedTrigger page={context.page} onRestore={open} />;
}
/* Expanded overrides the dragged width; otherwise the user's own width wins.
Both are clamped against the viewport so the dashboard is never squeezed. */
const viewportCap = Math.round(viewportWidth * MAX_VIEWPORT_SHARE);
@@ -131,25 +219,6 @@ export function AssistantPanel({ stickyClassName, panelHeightClassName }) {
const trackWidth = panelWidth + GUTTER;
/* Phones: stack Owliver under the dashboard. A 380px column beside the page is
not a layout at this width, and an overlay that opens on load would put a
sheet between the user and the page they asked for. */
if (viewportWidth < STACK_BREAKPOINT) {
return (
<aside aria-label="Owliver workspace" className="pb-6 pt-2">
<KrowAssistant
key={context.id}
context={context}
expanded={false}
onClose={close}
onExpand={null}
onRestore={null}
className="h-[32rem]"
/>
</aside>
);
}
return (
<aside
aria-label="Owliver workspace"

32
src/components/ai-assistant/AssistantPanelContext.jsx
View File

@@ -1,6 +1,7 @@
import * as React from 'react';
import { base44 } from '@/api/base44Client';
import { resolveAssistantContext } from './placement';
import { PHONE_QUERY } from './viewport';
import { PageContextProvider } from './PageContext';
import { AgentProvider } from './AgentContext';
@@ -58,6 +59,24 @@ function writeFlag(key, value) {
}
}
/**
* Whether this session is starting on a phone.
*
* Read once, to pick the *default* — never to decide how the panel renders.
* That decision belongs to `AssistantPanel`, which watches the same query and
* re-renders when it changes; a resize past the breakpoint must move the panel
* between presentations without silently reopening or closing it.
*
* The same media query the layout switches on, imported rather than repeated.
*/
function startsOnPhone() {
try {
return window.matchMedia(PHONE_QUERY).matches;
} catch {
return false;
}
}
export function AssistantPanelProvider({ role, pathname, children }) {
/* Two different things, deliberately kept apart: the account preference is
whether Owliver *should* open by default, and the session flag is whether
@@ -65,8 +84,19 @@ export function AssistantPanelProvider({ role, pathname, children }) {
panel collapsed for the afternoon does not rewrite the account setting, and
an account with Owliver off does not get the panel pushed back at it on
every new tab. */
/* The default differs by presentation, and only the default.
On the desktop workspace Owliver *is* part of the page, so it opens with
it. On a phone the workspace is an overlay (see AssistantPanel), and an
overlay that opens on load is a sheet between the reader and the page they
asked for — so a phone starts on the docked pill, one tap from the same
conversation. Everything after that first render is the shared state:
opening on a phone is the same `open()` the desktop header calls, and the
session remembers it either way. */
const [open, setOpen] = React.useState(
() => readFlag(OPEN_KEY, base44.auth.preferences().owliverDefault !== false)
() => readFlag(
OPEN_KEY,
!startsOnPhone() && base44.auth.preferences().owliverDefault !== false
)
);
const [expanded, setExpanded] = React.useState(() => readFlag(EXPANDED_KEY));
const [width, setWidth] = React.useState(() => {

102
src/components/ai-assistant/viewport.js Normal file
View File

@@ -0,0 +1,102 @@
/**
* Viewport facts the Owliver workspace is laid out from.
*
* Separate from both the panel and its context because both need them: the
* panel decides which presentation to render, the provider decides which state
* to start in, and a breakpoint that two modules each keep their own copy of is
* a breakpoint that will eventually disagree with itself. Keeping it here also
* keeps the two from importing each other in a cycle.
*/
import * as React from 'react';
/**
* Below this width there is no room for a column *beside* the dashboard — a
* 380px track on a 375px phone collapses `main` to nothing — so Owliver stops
* being a column at all and becomes an overlay over the page.
*
* Deliberately Tailwind's `md` (768px), not `lg`: tablets already lay the inline
* column out acceptably, so they keep the two-column workspace and only phones
* change presentation. Exported so the provider can start a phone with the
* workspace closed from the same number the layout switches on — two places
* asking "is this a phone" must never be able to disagree.
*/
export const STACK_BREAKPOINT = 768;
export const PHONE_QUERY = `(max-width: ${STACK_BREAKPOINT - 1}px)`;
/** Tracks viewport width so the panel can be clamped. */
export function useViewportWidth() {
const [width, setWidth] = React.useState(() =>
typeof window === 'undefined' ? 1440 : window.innerWidth
);
React.useEffect(() => {
const onResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, []);
return width;
}
/**
* Whether the shell is in its phone layout.
*
* `matchMedia` rather than a width comparison, so the switch happens on exactly
* the same boundary the stylesheet uses. `window.innerWidth` is not that
* boundary on a phone: when anything on the page overflows, mobile browsers
* widen the layout viewport to fit it, `innerWidth` reports the widened value,
* and the layout that was supposed to rescue the page reads the viewport as a
* tablet and hands it a 400px sidebar instead. A media query is evaluated
* against the media, not against the content, so it cannot be talked out of the
* mobile layout by the very overflow the mobile layout exists to prevent.
*/
export function useIsPhone() {
const [phone, setPhone] = React.useState(() => {
try {
return window.matchMedia(PHONE_QUERY).matches;
} catch {
return false;
}
});
React.useEffect(() => {
const mql = window.matchMedia(PHONE_QUERY);
const onChange = (e) => setPhone(e.matches);
setPhone(mql.matches);
mql.addEventListener('change', onChange);
return () => mql.removeEventListener('change', onChange);
}, []);
return phone;
}
/**
* The height the user can actually see, while a keyboard is open.
*
* `100dvh` follows the address bar but knows nothing about the on-screen
* keyboard: with the keyboard up, a `100dvh` sheet keeps its full height and
* puts its own composer underneath the keys — the one control the sheet exists
* to offer. `visualViewport` is the region left over, so the sheet is sized to
* that and the composer stays on screen.
*
* Returns `null` where the API is missing, and the caller falls back to the
* `100dvh` class. Nothing here is a fixed pixel height.
*/
export function useVisualViewport() {
const [box, setBox] = React.useState(null);
React.useEffect(() => {
const vv = window.visualViewport;
if (!vv) return undefined;
const update = () => setBox({ height: Math.round(vv.height), offsetTop: Math.round(vv.offsetTop) });
update();
vv.addEventListener('resize', update);
vv.addEventListener('scroll', update);
return () => {
vv.removeEventListener('resize', update);
vv.removeEventListener('scroll', update);
};
}, []);
return box;
}