fixed spacing in navbar and footer

[hars-21]

I have fixed the spacing and alignment issue in the nav and the footer components.
fixes: #346

1. Improved spacing in nav:

previously -

after improvement -

2. Improved alignment in footer:

previously -

after improvement -

[hars-21]

@sxd Sir, Please review the PR and let me know if any other changes are needed. Thanks!

[hars-21]

@sxd @jsilvela @gbartolini Sorry for tagging again but please can you review the PR and let me know if any changes are needed. It would be very helpful. Thanks!

[sxd]

@hars-21 you need to have some patience, I have PRs in my queue from may/June sadly we're not so many reviewing and we don't get so much help either, please, I ask you for some patience it's in my radar

[hars-21]

Okay sure sir, Sorry again for messaging

[jsilvela]

Hello:

1. please sign your commit. Have a look at the failing DCO check, which includes instructions on fixing your commit
2. I took your PR for a spin. The footer seems improved. The nav bar does not. See grab:

[hars-21]

I have signed my commits and DCO check is now approved. Also, I have fixed navbar at my end.
Result:

Please let me know if the problem still persists. Thanks!

[jsilvela]

Not fixed. Not at all.
The problem with the navbar persists.
Looking at the nav partial, I see the same change as you had made originally, i.e. using gap-10 instead of gap-14.
So, you changed nothing but merged from main and messed up your commit history.

[hars-21]

Sorry sir for creating mess and troubling you, now I have tried my best and fixed the issue.

I have fixed spacing in navbar and footer.
Signed the commit.
Also, cleaned my commit history.

Sir, please run the development server after pulling the changes so that the output.css file can be updated (through the tailwind build script).

[jsilvela]

Are you testing your PR with different sizes of window?
Given the problem is the collision of the first item with the logo and the last item with the github icons, I don't understand your insistence on changing the inter-item gap.

Two different window sizes that produce collisions with your fix.

[hars-21]

Sir can you please share your window sizes on which this problem is occurring.

I have tested on my changes on mainly these 2 sizes: 1024 * 1366 (ipad pro) and 1280 * 800 (macbook pro 13-inch) -> These are common sizes for ipads and 13 inch laptops.

Result:

[jsilvela]

Resizing is a continuum. Drag your window around and see the bunching up.
If your CSS cannot survive that, then you don't have the fix you claim you have.

[hars-21]

Okay Sir, now I have fixed the issue.
I have changed hamburger menu from max size 768px to 1024px. Now in mobile and tablet view there will be hamburger menu.
After 1024px i.e, Laptop screens will have the expanded menu.
The reason: in tablet view the expanded menu could not be fitted, so it will be good if we provide hamburger menu.

[jsilvela]

I'm not convinced. Your fix is ballooning in complexity, and you're solving the collision by removing the navbar altogether.
I don't understand why the nav cannot be fixed surgically in one line.

[hars-21]

Sir this is the second approach in which I have added javascript to resize the github star button based on screen size. It was necessary as it could not be solved through simple CSS.
I have removed the hamburger menu from tablet and reduced the size of logo and github button.
please tell me if this would work.

[jsilvela]

My previous comment was that your approach was over-complex for fixing the collision.
And now you've added Javascript.
It should not surprise you that I don't think this is justified at all. As I mentioned previously, the collision could be fixed in a single line.
I don't approve, perhaps you can find someone else who will.

[hars-21]

Sorry sir for troubling you repeatedly. But now I have tried to reduce the complexity and also fixed the spacing.
I have also reduced my commits.
Please review and help me get this PR approved.
Thanks

[jsilvela]

Sorry sir for troubling you repeatedly.

And yet you ignore what I write.
I've indicated twice that a single-line fix should be possible. And I've already asked why you insist on trying to fix a collision with inter-item gap.
For my understanding, and with no code necessary, just use your own words: how would you fix the collision in only one line?

[hars-21]

For my understanding, and with no code necessary, just use your own words: how would you fix the collision in only one line?

We can apply gap to the main container which will introduce spacing between logo, links and github badge. Or provide padding or margin to left and right for removing the collision.

Are these approaches good or is there any other concept which I am unable to think of.

[jsilvela]

OK, then, margin or padding will avoid the collision. Why haven't you done this before?
Much simpler than tacking on Javascript or doing window-dependent resizing/gapping wouldn't you say?

And, I don't think it's very coherent to change the font size for the navbar progressively while the rest of the text on the page remains the same size.
I do agree with reducing the inter-item gap slightly. 14px was a bit much.
Keep it simple and short, and fix only the problems pointed out in the GH issue.

[hars-21]

OK, then, margin or padding will avoid the collision. Why haven't you done this before?
Much simpler than tacking on Javascript or doing window-dependent resizing/gapping wouldn't you say?

Okay, so the reason why I didn't apply margin or padding is while it solves the collision issue but it also creates other ui issues such as distorted logo, improper spacing and overflowing.

As you can see there are many issues. So as a web developer I would suggest you can go with my latest commit which has only 5 lines of change in nav.html. Also, I have removed the javascript.

Or If you want only margin or padding spacing, I am ready to do that. Please let me know which one I should proceed with.

[jsilvela]

while it solves the collision issue but it also creates other ui issues such as distorted logo, improper spacing and overflowing.

The padding does not introduce those issues. Those issues exist already in production.
Since the problems the Issue complained of were the footer spacing and the collision of the navbar, I think you should do the easiest fix. And as I mentioned, I think reducing the inter-item gap from 14 to, say, 10 px, is also relevant as part of this.

Other issues can be raised in new tickets, and fixed in other PRs.
Given the website is likely to go through some redesign soon, please keep the PR small and to-the-point.

[hars-21]

Okay Sir thanks for the clarification, I have now reduced the gap and also added 4 px of padding to remove the collision.

Now I guess, this PR can be merged.
Also, I would love to contribute in website redesign. Please tell me whenever any help is needed.

[jsilvela]

Thank you.
To be pushed to prod, this would need a maintainer anyway, and I'd like to have a second approval for merge, too.