TYPO3 Core

Hi, all

I discovered something strange today ...

Steps to reproduce:

1. Open the backend
2. Navigate to Web -> Page
3. Select a page where you have multiple content-elements on
4. Shrink the width of the browser-window until you get a scrollbar for the tt_content elements
5. Scroll to the right at the scrollbar that just appeared
6. Try to move one of the elements by drag&drop and grab the title in the area that you scrolled into

Hope you get what I mean ;)

I tested it on Firefox 22.0 and Chrome 27.0 - both have the same behavior here.

Now, that I played a bit around, the only reason to me seems, that the element #typo3-inner-docbody just takes the width of the visible area. And just inside this area, the elements are dragable (they're dropable outside of it ...)

What I did is adding the following CSS:
typo3/sysext/t3skin/stylesheets/structure/main_body.css

 div#typo3-inner-docbody {
     padding: 15px 12px;
+    position: absolute; /* Does most of the magic. */
+    min-width: 100%;    /* Needed if form is smaller than screen. Will then stretch, as it is now */
+    box-sizing: border-box; /* We do width 100% and padding, so we need to reset box-sizing :) */
+    -moz-box-sizing: border-box;
 }

I now still have an issue, that I can just move the first element of a specific column, but I think it is another issue.

FYI:
I started my search in typo3/sysext/cms/layout/js/typo3pageModule.js, where I found out, that the drag-listener is added to the elements but never called. So I thought of an overlapping problem in CSS.