Fix #51: Database Plugin Input Fields for Tables and Columns descriptions Lack Limits and Cause UI Overflow

[maranix]

Addresses the issue described in #51.

• Fix UI Overflow in Tables and Columns due to lack of character limits in description element.
• Implement mouse hover to show complete description of Column.

[maranix]

How did this get closed?

Edit: I guess merging the upstream to my fork caused that because the histories were same and changes weren't pushed.

[sethumadhavan-k]

@maranix Please resolve the merge conflict

[maranix]

I've been trying to figure this out since the last 3 days but I've been facing a couple of issues.

The issue which was described currently looks something like this.

The Table in Schema Details section has its Description column overflowing in the x-axis which ends up taking the entire width of screen (i guess). I've tried adding the maxWidth and width css properties to only take up a specific amount of space, doing so results in weird layout behaviors. Using the percentage unit relative to the parent element's width does applies a hard limit on the maximum width taken by the description column. However the EditButton which is supposed to be right next to the description text, is stretched out to the end of the row. See below screenshots for better visual understanding.

The purple Container is the element which actually shows the row.description property and the green one is EditButton, whereas the red container is the entire flexbox which incorporates both of these elements. Below is the code for this:

 /* Added backgroundColor */
<div style={{ display: "flex", alignItems: "center", backgroundColor: "red" }}>

     /* Added backgroundColor */
    <div style={{ flexGrow: "1", backgroundColor: "blueviolet" }}>
        <textarea key={`textarea-${row.table_id}`} className="textarea" data-type="table" data={`${JSON.stringify(row)}`} data-table-name={`${row.table_name}`} data-table-id={`${row.table_id}`} style={{ display: "none", width: "100%", height: "48px", }} defaultValue={row.description}>{}</textarea>

         /* Added display, maxWidth and textOverflow properties to limit size show ellipsis */
        <span key={`span-${row.table_id}`} className="span" style={{ pointerEvents: "none", height: "32px", overflow: "hidden", display: "block", maxWidth: "25%", textOverflow: "ellipsis" }}>{row.description}</span>
     </div>

      /* Added backgroundColor */
     <div className="col-edit" style={{ backgroundColor: "greenyellow" }}>
           <FaPen color="#7298ff" style={{ pointerEvents: "none" }} />
     </div>
    </div>
</div>

I am lost at this point and cannot figure out where is this extra space is being added and coming from between the description text and edit button. I have also tried removing the flexGrow property from both the element and tableColumns Description object. That doesn't help or does anything either. Any suggestions would be very appreciated.

[sethumadhavan-k]

@maranix Could you please resolve the merge conflict? Once that's done, I can run the code and provide my suggestions

[maranix]

@sethumadhavan-k Merge-conflict resolved. Apologies for late replies and sitting on this issue for such a long time, I am currently not well hence I've been refraining from spending much time in front of screens.

[agberoz]

Hi @maranix,
If any assistance is required meet our team here: https://join.slack.com/t/theailounge/shared_invite/zt-2ogkrruyf-FPOHuPr5hdqXl34bDWjHjw

[ashmilhussain]

@maranix can you update on this PR, id done please fix conflicts and change draft status

[maranix]

@sethumadhavan-k Can you please check the changes now? I think I have got it correctly this time and implemented the correct required behavior.

Sorry for being inactive, I've been occupied because of an unfortunate tragedy and had to deal with that.

[sethumadhavan-k]

@maranix let me check it

[sethumadhavan-k]

@maranix it's looks good..

[maranix]

@ashmilhussain Any updates for this PR?

[ashmilhussain]

Hi @maranix will review and merge if good