Skip to content

Commit

Permalink
fix(overflow-components): Fix overflowing components (#69)
Browse files Browse the repository at this point in the history 
Co-authored-by: Broknloop <broknloop@gmail.com>
  • Loading branch information
@broknloop @joaomcclain
broknloop and joaomcclain authored Mar 16, 2024
1 parent c365fe9 commit 6e0e49c
Show file tree
Hide file tree
Showing 6 changed files with 21 additions and 17 deletions.
2 changes: 1 addition & 1 deletion src/main/js/components/accordion/accordion.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const Accordion = ({
{controllerElement(isExpanded)}
</div>
{isExpanded && (
<div id={contentDescription} className="min-w-full flex flex-col pl-4">
<div id={contentDescription} className="w-full flex flex-col pl-4" style={{maxWidth: "220px"}}>
{children}
</div>
)}
Expand Down
12 changes: 8 additions & 4 deletions src/main/js/routes/content/content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,15 +72,19 @@ function Content() {

return (
<>
<div className="w-full overflow-x-scroll component-no-scrollbar md:mt-4 mt-6 pb-6">
<div className="w-full overflow-x-scroll component-no-scrollbar mt-6 pb-6">
<div className="flex w-full h-full" style={{height: "100%"}}>
{contentData
.map((data, index) => {
let marginRight = index === contentData.length - 1 ? "0" : "0.75rem"
return (
<div key={index} className="flex-grow flex-wrap" style={{minWidth: "200px", marginRight: "0.75rem"}}>
<div key={index} className="flex-grow flex-wrap" style={{minWidth: "200px", marginRight: marginRight}}>
<div className="flex flex-col justify-center w-full max-w-sm text-center bg-standout-blue rounded-md shadow-md border border-1 border-standout-blue" style={{height: "100%", padding: "1.0rem", borderColor: "#26324a"}}>
<div className="text-yellow-400">
{data.schema.schemaName}
<div className="text-yellow-400 w-full">
<p className="text-yellow-400 text-ellipsis overflow-hidden w-full">
{data.schema.schemaName}
</p>

</div>

<div>
Expand Down
2 changes: 1 addition & 1 deletion src/main/js/routes/error/vispana-error.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function VispanaError({errorMessage, showLogo= true}) {
return (<>
<main role="main" className="h-screen flex flex-row flex-wrap min-w-full">
<div className={`${alignCenter} min-h-screen bg-darkest-blue min-w-full`}>
<div className="flex-col justify-center hero-content lg:flex-row min-w-full">
<div className="flex-col justify-center hero-content min-w-full">
<div
className="card flex-shrink-0 w-full max-w-1/2 shadow-2xl bg-standout-blue overflow-visible" >
<div style={{position: "absolute", top: "-50px", left: "calc(50% - 40px)"}}
Expand Down
2 changes: 1 addition & 1 deletion src/main/js/routes/index/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function Index() {
return (<>
<main role="main" className="h-screen flex flex-row flex-wrap">
<div className="hero min-h-screen bg-darkest-blue">
<div className="flex-col justify-center hero-content lg:flex-row w-full">
<div className="justify-center hero-content flex-row w-full">
<div
className="card flex-shrink-0 w-full max-w-1/2 shadow-2xl bg-standout-blue overflow-visible">
<div style={{position: "absolute", top: "-50px", left: "calc(50% - 40px)"}}
Expand Down
18 changes: 9 additions & 9 deletions src/main/js/routes/layout/layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,10 @@ function Layout() {
errorElement={<VispanaError/>}>
{(loadedVespaState) => (
<main role="main" className="h-screen flex flex-row flex-wrap">
<div id="sideBar"
className="relative h-screen flex flex-col flex-wrap p-6 flex-none w-56 md:-ml-64 md:fixed md:top-0 md:z-30 md:h-screen md:shadow-xl animated faster bg-standout-blue">
<div id="sideBar" className="relative h-screen flex flex-col flex-wrap p-6 min-w-75 max-w-80 animated faster bg-standout-blue">
<div className="flex flex-col">
<div
className="flex flex-row flex-start justify-center mb-3 capitalize font-medium text-sm hover:text-teal-600 transition ease-in-out duration-500">
className="flex flex-row flex-start justify-center mb-3 font-medium text-sm hover:text-teal-600 transition ease-in-out duration-500">
<div
className="mb-3 w-24 h-24 rounded-full bg-white flex items-center justify-center cursor-pointer text-indigo-700 border-4 border-yellow-400 overflow-hidden">
<a href="/">
Expand Down Expand Up @@ -111,7 +110,7 @@ function Layout() {

</div>
</div>
<div className="flex-1 h-screen p-6 md:mt-16 overflow-x-auto w-full">
<div className="flex-1 h-screen p-6 overflow-x-auto w-full">
<div>
<div className="space-x-1 w-full">
<div className="text-right font-flow"
Expand Down Expand Up @@ -149,7 +148,7 @@ function Layout() {
</div>
</div>
<div className="flex-1 max-h-full bg-darkest-blue">
<div className="-my-2 sm:-mx-6 lg:-mx-8 overflow-x-auto pb-4">
<div className="-my-2 x-8 overflow-x-auto pb-4">
<Outlet context={loadedVespaState}/>
</div>
</div>
Expand All @@ -164,11 +163,12 @@ function Layout() {
function navLinkStyle() {
return ({isActive}) => {
if (isActive) {
return "mt-3 capitalize font-medium text-sm transition ease-in-out duration-100" +
" text-yellow-400"
return "mt-3 font-medium text-sm transition ease-in-out duration-100" +
" text-yellow-400 text-ellipsis overflow-hidden w-full"

} else {
return "mt-3 capitalize font-medium text-sm hover:text-white transition" +
" ease-in-out duration-500 text-gray-300"
return "mt-3 font-medium text-sm hover:text-white transition" +
" ease-in-out duration-500 text-gray-300 text-ellipsis overflow-hidden w-full"
}
};
}
Expand Down
2 changes: 1 addition & 1 deletion src/main/js/routes/loading/loading.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ function Loading({centralize = true}) {
return (<>
<main role="main" className="h-screen flex flex-row flex-wrap min-w-full">
<div className={`${alignCenter} min-w-full`}>
<div className="flex-col justify-center hero-content lg:flex-row min-w-full">
<div className="flex-col justify-center hero-content flex-row min-w-full">
<span className="loading loading-ring loading-lg"></span>
</div>
</div>
Expand Down

0 comments on commit 6e0e49c

Please sign in to comment.