random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-05-18 14:24:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

[accessibility-2278267]:[Supporting the platform - Azure Cosmos DB - Data Explorer]: All the controls present under 'Data Explorer' page are truncated after setting the viewport to 320*256 pixel.

Browse Source
This commit is contained in:
Satyapriya Bai 2025-04-04 22:21:11 +05:30
parent 32576f50d3
commit 8f8ec94248
3 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/Explorer/Sidebar.tsx
View File

@ -98,6 +98,16 @@ const useSidebarStyles = makeStyles({
display: "flex",
},
},
accessibleContent: {
"@media (max-width: 420px)": {
overflow: "scroll",
},
},
minHeight: {
"@media (max-width: 420px)": {
minHeight: "300px",
},
},
});
interface GlobalCommandsProps {
@ -299,11 +309,16 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
return (
<div className="sidebarContainer">
<Allotment ref={allotment} onChange={onChange} onDragEnd={onDragEnd} className="resourceTreeAndTabs">
<Allotment
ref={allotment}
onChange={onChange}
onDragEnd={onDragEnd}
className={`resourceTreeAndTabs ${styles.accessibleContent}`}
>
{/* Collections Tree - Start */}
{hasSidebar && (
// When collapsed, we force the pane to 24 pixels wide and make it non-resizable.
<Allotment.Pane minSize={24} preferredSize={250}>
<Allotment.Pane className={styles.minHeight} minSize={24} preferredSize={250}>
<CosmosFluentProvider className={mergeClasses(styles.sidebar)}>
<div className={styles.sidebarContainer}>
{loading && (
@ -357,7 +372,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
</CosmosFluentProvider>
</Allotment.Pane>
)}
<Allotment.Pane minSize={200}>
<Allotment.Pane className={styles.minHeight} minSize={200}>
<Tabs explorer={explorer} />
</Allotment.Pane>
</Allotment>

9
src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
View File

@ -143,6 +143,13 @@ export const useDocumentsTabStyles = makeStyles({
deleteProgressContent: {
paddingTop: tokens.spacingVerticalL,
},
smallScreenContent: {
"@media (max-width: 420px)": {
flexWrap: "wrap",
minHeight: "max-content",
padding: "4px",
},
},
});
export class DocumentsTabV2 extends TabsBase {
@ -2084,7 +2091,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
return (
<CosmosFluentProvider className={styles.container}>
<div className="tab-pane active" role="tabpanel" style={{ display: "flex" }}>
<div className={styles.filterRow}>
<div className={`${styles.filterRow} ${styles.smallScreenContent}`}>
{!isPreferredApiMongoDB && <span> SELECT * FROM c </span>}
<InputDataList
dropdownOptions={getFilterChoices()}

2
src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap
View File

@ -14,7 +14,7 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
}
>
<div
className="___11ktxfv_0000000 f1o614cb fy9rknc f22iagw fsnqrgy f1f5gg8d fjodcmx f122n59 f1f09k3d fg706s2 frpde29"
className="___11ktxfv_0000000 f1o614cb fy9rknc f22iagw fsnqrgy f1f5gg8d fjodcmx f122n59 f1f09k3d fg706s2 frpde29 ___1ngl8o6_0000000 fz7mnu6 fl3egqs flhmrkm"
>
<span>
SELECT * FROM c